import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

interface Hero02Props {
  badge?: { text: string; url?: string };
  title?: string;
  description?: string;
  buttons?: {
    text: string;
    url?: string;
    icon?: React.ReactNode;
    variant?: "default" | "outline" | "ghost" | "secondary" | "link";
  }[];
  img?: string;
  className?: string;
}

const Hero02 = ({
  badge = { text: "Production-ready components", url: "#" },
  title = "Shadcn UI Blocks, Copy & Customize",
  description = "Pre-built landing page components for React. Just copy the code and focus on what matters — your product.",
  buttons = [
    {
      text: "Browse Components",
      url: "#",
      icon: <ArrowUpRight className="size-4" />,
    },
    { text: "View Docs", url: "#", variant: "outline" },
  ],
  img = "https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp",
  className,
}: Hero02Props) => {
  return (
    <section
      className={cn(
        "relative w-full overflow-hidden py-16 md:py-24",
        className,
      )}
    >
      <div className="container mx-auto px-6">
        <div className="relative z-10 flex flex-col items-center gap-4 text-center md:pt-16">
          {badge && (
            <Badge
              variant="secondary"
              className="border border-border py-1"
              asChild
            >
              <a href={badge.url}>{badge.text}</a>
            </Badge>
          )}

          <h1 className="max-w-5xl text-4xl leading-tight font-medium tracking-tight md:text-5xl lg:text-6xl">
            {title}
          </h1>

          <p className="max-w-3xl text-muted-foreground md:text-lg">
            {description}
          </p>

          {buttons && buttons.length > 0 && (
            <div className="grid w-full grid-cols-1 gap-4 sm:w-fit sm:grid-cols-2">
              {buttons.map((btn) => (
                <Button
                  key={btn.text}
                  size="lg"
                  variant={btn.variant ?? "default"}
                  className="w-full"
                  asChild
                >
                  <a href={btn.url}>
                    {btn.text}
                    {btn.icon}
                  </a>
                </Button>
              ))}
            </div>
          )}
        </div>

        {img && (
          <div className="mt-6 aspect-video w-full bg-muted/30 md:mt-16">
            <img
              src={img}
              alt={title}
              width={1000}
              height={1000}
              className="size-full rounded-md object-cover"
            />
          </div>
        )}
      </div>
    </section>
  );
};

export default Hero02;
Hero 02
