import { cn } from "@/lib/utils";
import { Container } from "@/components/container/components/container";
import { Image } from "@/components/image/components/image";
import { ReactNode } from "react";
import { avatars } from "@/components/avatar/avatars";
import { AvatarWithText } from "@/components/avatar-with-text/components/avatar-with-text";
import { QuoteOpenOutlined } from "@/components/icons/decorative";

export interface About1Props {
  content: ReactNode;
  imgSrc: string;
  className?: string;
  avatarProps: {
    src: string;
    alt?: string;
    name: string;
    subtitle: string;
  };
}

export function About1({
  className,
  imgSrc = "https://images.unsplash.com/photo-1556856425-366d6618905d?q=80&w=1200&h=1500&auto=format&fit=crop",
  content = (
    <div className="@sm:text-xl grid gap-y-8 gap-4">
      <QuoteOpenOutlined className="-mb-2 size-10 @sm:size-14" />
      <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>
        <AvatarWithText
          src={avatars.johnDoe.avatarSrc}
          alt=""
          name={avatars.johnDoe.avatarName}
          subtitle={avatars.johnDoe.avatarSubtitle}
          size="xl"
          className="hidden @sm:grid"
        />
        <AvatarWithText
          src={avatars.johnDoe.avatarSrc}
          alt=""
          name={avatars.johnDoe.avatarName}
          subtitle={avatars.johnDoe.avatarSubtitle}
          size="sm"
          className="@sm:hidden"
        />
      </div>
    </div>
  ),
}: About1Props) {
  return (
    <Container
      className="mx-auto max-w-7xl grid grid-cols-12 gap-4 gap-y-8"
      wrapperClassName={cn("py-32", className)}
    >
      <Image
        src={imgSrc}
        alt=""
        className="rounded-lg col-span-full sm:col-end-7 md:col-start-2 md:col-end-7"
      />
      <div className="@container max-sm:row-start-1 sm:px-4 md:px-8 col-span-full sm:col-start-7 sm:col-end-13 md:col-end-12">
        {content}
      </div>
    </Container>
  );
}
About blocks
