import { cn } from "@/lib/utils";
import { Container } from "@/components/container/components/container";
import { Image } from "@/components/image/components/image";
import { Link } from "@/components/link/components/link";
import { Card, CardContent } from "@/components/ui/card";
import { AvatarGroupWithText } from "@/components/avatar-group-with-text/components/avatar-group-with-text";
import { ComponentType, ReactNode } from "react";
import { LucideProps } from "lucide-react";
import type { VariantProps } from "class-variance-authority";
import { buttonVariants } from "@/components/ui/button";
import { avatars } from "@/components/avatar/avatars";

interface PostCardProps {
  date?: string;
  title: string;
  teaser: string | ReactNode;
  image?: {
    src: string;
    alt: string;
  };
  authors?: Array<{
    name: string;
    image?: string;
    initials?: string;
  }>;
  className?: string;
  linkProps: {
    label?: string;
    href: string;
    className?: string;
    icon?: ComponentType<LucideProps>;
    size?: VariantProps<typeof buttonVariants>["size"];
  };
}

const POSTS: PostCardProps[] = [
  {
    date: "Oct 01, 2025",
    title: "Build Beautiful UIs with Tailwind CSS",
    teaser:
      "A practical guide to structuring utilities, extracting components, and keeping your design system tidy.",
    image: {
      src: "https://images.unsplash.com/photo-1516131206008-dd041a9764fd?auto=format&fit=crop&w=1600&q=60",
      alt: "",
    },
    authors: [
      {
        name: avatars.sarahWilson.avatarName,
        image: avatars.sarahWilson.avatarSrc,
      },
      {
        name: avatars.mikeJohnson.avatarName,
        image: avatars.mikeJohnson.avatarSrc,
      },
    ],
    linkProps: {
      href: "#",
      label: "Read more",
    },
  },
  {
    date: "Oct 05, 2025",
    title: "Getting Started with shadcn/ui in Next.js",
    teaser:
      "Install, configure, and compose accessible primitives to move fast without sacrificing design.",
    image: {
      src: "https://images.unsplash.com/photo-1527689368864-3a821dbccc34?auto=format&fit=crop&w=1600&q=60",
      alt: "Developer workspace with laptop and UI sketches",
    },
    authors: [
      {
        name: avatars.janeSmith.avatarName,
        image: avatars.janeSmith.avatarSrc,
      },
    ],
    linkProps: { href: "#", label: "Read more" },
  },
  {
    date: "Oct 09, 2025",
    title: "Tailwind Grid Mastery: Responsive Layouts",
    teaser:
      "From simple two-column layouts to complex editorial grids, learn the patterns that scale.",
    image: {
      src: "https://images.unsplash.com/photo-1691073112675-9685bc6779bf?auto=format&fit=crop&w=1600&q=60",
      alt: "",
    },
    authors: [
      { name: avatars.johnDoe.avatarName, image: avatars.johnDoe.avatarSrc },
    ],
    linkProps: { href: "#", label: "Read more" },
  },
  {
    date: "Oct 12, 2025",
    title: "Designing with shadcn/ui: Patterns and Pitfalls",
    teaser:
      "Compose primitives into cohesive components, avoid class bloat, and keep accessibility first.",
    image: {
      src: "https://images.unsplash.com/photo-1658863025658-4a259cc68fc9?auto=format&fit=crop&w=1600&q=60",
      alt: "",
    },
    authors: [
      { name: avatars.timApple.avatarName, image: avatars.timApple.avatarSrc },
    ],
    linkProps: { href: "#", label: "Read more" },
  },
  {
    date: "Oct 13, 2025",
    title: "Dark Mode the Right Way with Tailwind",
    teaser:
      "System preference, class strategy, theming tokens, and avoiding FOUC in production.",
    image: {
      src: "https://images.unsplash.com/photo-1595683363301-1e94594a550d?auto=format&fit=crop&w=1600&q=60",
      alt: "",
    },
    authors: [
      {
        name: avatars.randySmith.avatarName,
        image: avatars.randySmith.avatarSrc,
      },
    ],
    linkProps: { href: "#", label: "Read more" },
  },
  {
    date: "Oct 13, 2025",
    title: "Build a Dashboard with shadcn/ui + Tailwind",
    teaser:
      "Cards, tables, charts, and layout techniques for clean, data-dense dashboards.",
    image: {
      src: "https://images.unsplash.com/photo-1592495989226-03f88104f8cc?auto=format&fit=crop&w=1600&q=60",
      alt: "Analytics dashboard interface with charts and tables",
    },
    authors: [
      {
        name: avatars.benButton.avatarName,
        image: avatars.benButton.avatarSrc,
      },
    ],
    linkProps: { href: "#", label: "Read more" },
  },
];

export interface About1Props {
  title: string;
  description: string;
  posts?: PostCardProps[];
  className?: string;
}

export function Blog1({
  title = "Blog page",
  description = "Where you'll find free resources to help you grow.",
  posts = POSTS,
  className,
}: About1Props) {
  return (
    <Container
      className="mx-auto max-w-7xl grid gap-6 md:gap-12"
      wrapperClassName={cn("py-32", className)}
    >
      <div className="grid gap-1">
        <h1 className="text-3xl md:text-5xl md:leading-[3.5rem] text-foreground text-balance max-w-[30ch] font-bold tracking-tight">
          {title}
        </h1>
        <p className="text-base leading-7 md:text-lg md:leading-8 text-foreground/60 max-w-[60ch]">
          {description}
        </p>
      </div>
      <div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(min(100%,250px),1fr))]">
        {posts.map(({ title, linkProps, image, authors, teaser, date }) => (
          <Link key={title} {...linkProps} className="grid">
            <Card
              className={cn(
                "grid overflow-hidden pt-0",
                {
                  "grid-rows-[auto_1fr]": image,
                },
                className,
              )}
            >
              {image && (
                <div className="relative aspect-[2.5/1] overflow-hidden">
                  <Image
                    src={image.src}
                    alt={image.alt}
                    width={330}
                    height={130}
                    className="object-cover h-full w-full"
                  />
                </div>
              )}
              <CardContent
                className={cn("grid gap-2", {
                  "grid-rows-1": authors && authors?.length > 0,
                })}
              >
                <div className="grid gap-2 content-start">
                  <div className="grid gap-2">
                    <time className="text-xs text-foreground/60">{date}</time>
                    <p className="text-base font-semibold tracking-tight text-card-foreground">
                      {title}
                    </p>
                  </div>
                  <p className="text-foreground/60 text-sm line-clamp-2 leading-6">
                    {teaser}
                  </p>
                </div>
                {authors && authors?.length > 0 ? (
                  <AvatarGroupWithText
                    className="mt-2 [&_span]:border-card"
                    size="xs"
                    subtitle={authors[0].name}
                    avatars={authors.map((author) => ({
                      src: author.image,
                      initials: author.initials,
                      alt: author.name,
                    }))}
                  />
                ) : null}
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </Container>
  );
}
Blog blocks
