import { ReactNode } from "react";
import { Container } from "@/components/container";
import { Image } from "@/components/image";
import { avatars } from "@/registry/zippystarter/data/avatars";
import { QuoteOpenFilled } from "@/components/icons/decorative";
import {
  FadeIn,
  FadeInStagger,
} from "@/components/fade-in";

interface About2Props {
  content?: ReactNode;
  imgSrc?: string;
  className?: string;
  avatarProps?: {
    name: string;
    subtitle: string;
  };
}

export function About2({
  content = (
    <FadeInStagger faster>
      <div className="@sm:text-xl grid gap-y-8 gap-4">
        <FadeIn>
          <QuoteOpenFilled className="-mb-2 size-10 @sm:size-14" />
        </FadeIn>
        <FadeIn>
          <div className="grid gap-8">
            <p>
              shadcn & Tailwind completely changed how I approach front-end
              work. I used to spend hours getting layouts just right or debating
              which version of a button to use.
            </p>
            <p>
              Now I drop in a template, tweak it, and move on. It’s not about
              cutting corners — it’s about not wasting time on things that don’t
              need reinventing.
            </p>
            <FadeIn>
              <div className="@sm:text-base text-sm">
                <p className="truncate text-foreground font-bold">
                  {avatars.chefCharlie.avatarName}
                </p>
                <p className="text-muted-foreground truncate">
                  {avatars.chefCharlie.avatarSubtitle}
                </p>
              </div>
            </FadeIn>
          </div>
        </FadeIn>
      </div>
    </FadeInStagger>
  ),
  className,
  imgSrc = "https://images.unsplash.com/photo-1611432579402-7037e3e2c1e4?q=80&w=1200&h=1500&auto=format&fit=crop",
}: About2Props) {
  return (
    <Container
      className="mx-auto max-w-7xl py-20 md:py-24"
      wrapperClassName={className}
    >
      <div className="lg:px-20 grid sm:grid-cols-2 gap-4 gap-y-8 max-md:items-center">
        <div className="@container relative max-sm:mx-8">
          <FadeInStagger>
            <FadeIn className="size-18 @sm:size-24 bg-primary rounded-full absolute -top-6 -left-6 @sm:-top-8 @sm:-left-8" />
            <FadeIn className="size-28 @sm:size-40 outline outline-muted-foreground rounded-full absolute bottom-8 -right-4 @sm:bottom-8 @sm:-right-8" />
            <FadeIn className="relative">
              <Image
                src={imgSrc}
                width={1200}
                height={1500}
                alt=""
                className="rounded-lg relative"
              />
            </FadeIn>
          </FadeInStagger>
        </div>
        <div className="@container sm:px-4 md:px-8">{content}</div>
      </div>
    </Container>
  );
}
About blocks
