import { AvatarGroup } from "@/components/shadcnblocks/avatar-group";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Testimonial {
  quote: string;
  author: string;
  role: string;
  company: string;
  avatars: Array<{
    image: string;
    fallback: string;
  }>;
}

interface Hero151Props {
  heading?: string;
  description?: string;
  button?: {
    text: string;
    url: string;
    className?: string;
  };
  testimonial?: Testimonial;
  images: {
    first: string;
    second: string;
    third: string;
    fourth: string;
  };
  className?: string;
}

const Hero151 = ({
  heading = "مجموعه بلاک‌های آماده رابط کاربری",
  description = "صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی برای استفاده مستقیم در پروژه‌ها.",
  button = {
    text: "شروع رایگان",
    url: "#",
  },
  testimonial = {
    quote: "استراتژی متمرکز، تحویل سریع",
    author: "John Doe",
    role: "مدیرعامل",
    company: "شرکت",
    avatars: [
      {
        image:
          "/block-media/shadcnblocks/block/avatar-2.webp",
        fallback: "AB",
      },
      {
        image:
          "/block-media/shadcnblocks/block/avatar-2.webp",
        fallback: "CD",
      },
      {
        image:
          "/block-media/shadcnblocks/block/avatar-3.webp",
        fallback: "EF",
      },
    ],
  },
  images = {
    first:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    second:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    third:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    fourth:
      "/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg",
  },
  className,
}: Hero151Props) => {
  return (
    <section className={cn("py-12 md:py-20", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-8 md:flex-row">
          <div className="flex-1">
            <div className="flex flex-col gap-4 lg:gap-8">
              <h1 className="leading-tighter max-w-[80%] text-xl font-semibold tracking-tight text-foreground lg:text-2xll xl:text-2xll">
                {heading}
              </h1>
              <p className="text-lg leading-relaxed text-muted-foreground xl:text-xl">
                {description}
              </p>
            </div>
            <div className="my-6 lg:my-10">
              <Button asChild size="lg">
                <a href={button.url}>{button.text}</a>
              </Button>
            </div>
            <div className="flex flex-wrap items-center gap-3">
              <AvatarGroup className="h-10">
                {testimonial.avatars.map((avatar, index) => (
                  <Avatar
                    key={index}
                    className="size-10 border-2 border-border"
                  >
                    <AvatarImage src={avatar.image} alt="تصویر نمونه" />
                    <AvatarFallback>{avatar.fallback}</AvatarFallback>
                  </Avatar>
                ))}
              </AvatarGroup>
              <div>
                <p className="mb-1 text-sm text-foreground/60 italic">
                  {testimonial.quote}
                                                  </p>
                <p className="text-sm font-medium text-foreground/60">
                  {testimonial.author}, {testimonial.role} @
                  {testimonial.company}
                </p>
              </div>
            </div>
          </div>
          <div className="w-full flex-1">
            <div className="w-full max-w-[50rem]">
              <AspectRatio ratio={1 / 1} className="h-full w-full">
                <div className="grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]">
                  <div className="overflow-hidden rounded-[5.2%] border border-muted bg-muted">
                    <img
                      src={images.first}
                      alt="تصویر نمونه"
                      className="object-fit h-full w-full object-center"
                    />
                  </div>
                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
                    <div className="absolute top-1/2 left-[5%] w-[110%] max-w-[25rem] -translate-y-1/2 overflow-hidden rounded-md">
                      <AspectRatio ratio={1.739130435 / 1}>
                        <img
                          src={images.second}
                          alt="تصویر نمونه"
                          className="size-full object-cover object-center"
                        />
                      </AspectRatio>
                    </div>
                  </div>
                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
                    <div className="absolute top-[9%] left-[9%] w-[200%] max-w-[37.5rem] overflow-hidden rounded-md">
                      <AspectRatio ratio={1.6 / 1}>
                        <img
                          src={images.third}
                          alt="تصویر نمونه"
                          className="size-full object-cover object-center"
                        />
                      </AspectRatio>
                    </div>
                  </div>
                  <div className="relative overflow-hidden rounded-[5.2%] border border-muted bg-muted">
                    <div className="relative top-[12%] left-[50%] w-[70%] max-w-[17.5rem] -translate-x-[50%]">
                      <AspectRatio ratio={0.52 / 1}>
                        <img
                          src="/block-media/shadcnblocks/block/mockups/phone-1.png"
                          alt="تصویر نمونه"
                          className="absolute z-20 w-full"
                        />
                        <img
                          src={images.fourth}
                          alt="تصویر نمونه"
                          className="absolute z-10 w-full rounded-[16%]"
                        />
                      </AspectRatio>
                    </div>
                  </div>
                </div>
              </AspectRatio>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero151 };