import { cn } from "@/lib/utils";
import { format, parseISO } from "date-fns";
import { History, Calendar } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { AvatarWithText } from "@/components/avatar-with-text/components/avatar-with-text";
import { Container } from "@/components/container/components/container";
import { Link } from "@/components/link/components/link";
import { avatars } from "@/components/avatar/avatars";

export interface Author {
  avatarName: string;
  avatarSubtitle: string;
  avatarSrc: string;
  href?: string;
}

export interface HeroBlogProps {
  title: string;
  meta?: {
    date: string;
    readTime: string;
  };
  authors?: Author[];
  className?: string;
  avatarSize?: "sm" | "xs";
}

export function Hero3({
  authors = [avatars.travelBug, avatars.sarahWilson],
  title = "Combining shadcn and tailwind with your design system",
  meta = { date: new Date().toISOString(), readTime: "5 min read" },
  className,
  avatarSize = "sm",
}: HeroBlogProps) {
  return (
    <Container
      className="mx-auto max-w-7xl grid justify-items-start gap-6 relative"
      wrapperClassName={cn("py-12", className)}
    >
      <Link
        className={buttonVariants({
          variant: "link",
          size: "sm",
          className: "-ml-2 -mb-4",
        })}
      >
        <ArrowLeft />
        Back
      </Link>
      <h1 className="text-3xl md:text-5xl md:leading-[3.5rem] font-bold text-foreground -mb-2 text-balance">
        {title}
      </h1>

      <div className="flex items-center gap-1">
        <p className="flex items-center gap-5 text-xs text-muted-foreground max-w-[60ch]">
          <span className="flex items-center gap-1">
            <History size={14} />
            {meta?.readTime}
          </span>
          <span className="flex items-center gap-1">
            <Calendar size={14} />
            {meta?.date ? format(parseISO(meta.date), "LLL d, yyyy") : null}
          </span>
        </p>
      </div>
      {authors?.length ? (
        <div
          className={cn("flex flex-wrap", {
            "gap-10 gap-y-6 mt-4": avatarSize === "sm",
            "gap-6": avatarSize === "xs",
          })}
        >
          {authors.map((author) => (
            <AvatarWithText
              key={author.avatarName}
              name={author.avatarName}
              subtitle={author.avatarSubtitle}
              src={author.avatarSrc}
              href={author.href}
              size={avatarSize}
            />
          ))}
        </div>
      ) : null}
    </Container>
  );
}
Hero blocks
