import { ArrowUpRightIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Badge } from "@/registry/default/ui/badge/base";
import { Input } from "@/registry/default/ui/input/base";
import { Card, CardContent } from "@/registry/default/ui/card/base";

export type BlogData = {
  img: string;
  date: string;
  blogTitle: string;
  description: string;
  author: string;
  badge: string;
  authorLink: string;
  blogLink: string;
  categoryLink: string;
};

const blog_data = [
  {
    img: "https://cdn.shadcnstudio.com/ss-assets/template/landing-page/ink/image-02.png",
    date: "January 20, 2026",
    blogTitle: "Build with Empathy for Better User Outcomes",
    description:
      "Understand user needs to create intuitive and lovable experiences.",
    author: "Allen Reilly",
    badge: "UI",
    authorLink: "#",
    blogLink: "#",
    categoryLink: "#",
  },
  {
    img: "https://cdn.shadcnstudio.com/ss-assets/template/landing-page/ink/image-03.png",
    date: "May 20, 2025",
    blogTitle: "Write Code That Scales with Your Product",
    description:
      "Structure your projects for easier updates, faster growth, and bugs.",
    author: "Sara Wilkerson",
    badge: "Coding",
    authorLink: "#",
    blogLink: "#",
    categoryLink: "#",
  },
];

const Hero = ({ blogdata = blog_data }: { blogdata: BlogData[] }) => {
  return (
    <section className="bg-indigo-700 pt-16 pb-12 sm:pb-16 lg:pb-24">
      <div className="mx-auto flex h-full max-w-7xl flex-col gap-16 px-4 sm:px-6 lg:px-8">
        {/* Hero Header */}
        <div className="flex max-w-4xl flex-col items-center gap-4 self-center text-center">
          <Badge className="text-sm font-normal bg-indigo-400 text-indigo-900 border-0">
            Stop technocracy, embrace democracy
          </Badge>
          <h1 className="text-3xl leading-[1.29167] font-semibold text-balance sm:text-4xl lg:text-5xl">
            Real AI for the jilted generation
          </h1>
          <p className="mx-auto max-w-2xl text-xl text-indigo-400">
            Tuck Frump is not just a quote, but a cultural phenomenon that has
            captivated the world with its blend of humor, satire, and political
            commentary.
          </p>
          <div className="z-10 flex items-center gap-0 p-2">
            <Input
              type="email"
              placeholder="Your email"
              required
              className="bg-background h-10 sm:w-90"
            />
            <Button size="sm" className="rounded-l-none bg-indigo-200" asChild>
              <a href="#">Subscribe</a>
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {blogdata.map((item, index) => (
            <HeroCard key={`${item.author}-${index}`} data={item} />
          ))}
        </div>
      </div>
    </section>
  );
};

const HeroCard = ({ data }: { data: BlogData }) => {
  return (
    <Card className="group py-0 shadow-none bg-indigo-500">
      <CardContent className="grid grid-cols-1 px-0 xl:grid-cols-2">
        <div className="p-6">
          <div className="h-59.5 w-full overflow-hidden rounded-lg">
            <img
              src={data.img}
              alt={data.author}
              className="w-full object-cover transition-transform duration-300 group-hover:scale-105"
            />
          </div>
        </div>
        <div className="flex flex-col justify-center gap-3 p-6">
          <div className="flex items-center gap-1.5 py-1">
            <div className="text-muted-foreground text-sm flex grow items-center">
              <p>{data.date}</p>
            </div>
            <a href={data.categoryLink}>
              <Badge className="bg-primary/10 text-primary border-0 text-sm">
                {data.badge}
              </Badge>
            </a>
          </div>
          <a href={data.blogLink}>
            <h3 className="text-xl font-medium">{data.blogTitle}</h3>
          </a>

          <p className="text-muted-foreground">{data.blogTitle}</p>
          <div className="flex w-full items-center justify-between gap-1 py-1">
            <a
              href={data.authorLink}
              className="text-sm font-italic font-medium"
            >
              {data.author}
            </a>
            <Button
              size="icon"
              variant="outline"
              className="group-hover:bg-primary! hover:bg-primary! hover:text-primary-foreground group-hover:text-primary-foreground group-hover:border-transparent hover:border-transparent"
              asChild
            >
              <a href={data.blogLink}>
                <ArrowUpRightIcon />
              </a>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default Hero;