"use client";

import { ArrowLeft, Construction, Home } from "lucide-react";
import Link from "next/link";
import { BlurFade } from "@/components/ui/blur-fade";
import { Button } from "@/components/ui/button";
import { DotPattern } from "@/components/ui/dot-pattern";
import { cn } from "@/lib/utils";

interface UnderConstructionProps {
  title: string;
  description: string;
  locale?: string;
}

export function UnderConstruction({
  title,
  description,
  locale = "pt",
}: UnderConstructionProps) {
  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Pattern */}
      <DotPattern
        className={cn(
          "absolute inset-0 h-full w-full text-muted-foreground/20",
        )}
      />

      {/* Content */}
      <div className="relative z-10 container max-w-2xl mx-auto px-4">
        <BlurFade delay={0.1}>
          <div className="p-12 rounded-3xl border border-border/50 bg-card/80 backdrop-blur-xl shadow-2xl">
            {/* Icon */}
            <div className="flex justify-center mb-8">
              <div className="p-6 rounded-full bg-muted/50 border border-border/30">
                <Construction className="w-16 h-16 text-primary animate-pulse" />
              </div>
            </div>

            {/* Text */}
            <h1 className="text-4xl md:text-5xl font-bold text-center mb-4">
              {title}
            </h1>
            <p className="text-xl text-center text-muted-foreground mb-8">
              {description}
            </p>

            {/* Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href={`/${locale}`}>
                <Button size="lg" className="w-full sm:w-auto">
                  <Home className="mr-2 h-5 w-5" />
                  Voltar para Início
                </Button>
              </Link>
              <Button
                size="lg"
                variant="outline"
                className="w-full sm:w-auto"
                onClick={() => window.history.back()}
              >
                <ArrowLeft className="mr-2 h-5 w-5" />
                Voltar
              </Button>
            </div>
          </div>
        </BlurFade>
      </div>
    </div>
  );
}