import { ArrowDownRight, Star } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero4Props {
  className?: string;
}

const Hero4 = ({ className }: Hero4Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
        <div className="flex justify-end bg-muted">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه قهرمان"
            className="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]"
          />
        </div>
        <div className="flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-start">
          <h1 className="my-6 text-xl font-bold text-pretty lg:text-2xll xl:text-2xll">
            مجموعه‌ای از بلاک‌های آماده برای توسعه سریع رابط کاربری
                                </h1>
          <p className="mb-8 max-w-xl text-muted-foreground lg:text-xl">
            صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که می‌توانید بدون نیاز به طراحی از ابتدا، مستقیماً در پروژه‌های خود استفاده کنید.
                                </p>
          <div className="mb-12 flex w-fit flex-col items-center gap-4 sm:flex-row">
            <span className="inline-flex items-center -space-x-4">
              <Avatar className="size-12 border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-1.webp"
                  alt="نمونه"
                />
              </Avatar>
              <Avatar className="size-12 border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-2.webp"
                  alt="نمونه"
                />
              </Avatar>
              <Avatar className="size-12 border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-3.webp"
                  alt="نمونه"
                />
              </Avatar>
              <Avatar className="size-12 border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-4.webp"
                  alt="نمونه"
                />
              </Avatar>
              <Avatar className="size-12 border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-5.webp"
                  alt="نمونه"
                />
              </Avatar>
            </span>
            <div>
              <div className="flex items-center gap-1">
                <Star className="size-5 fill-yellow-400 text-yellow-400" />
                <Star className="size-5 fill-yellow-400 text-yellow-400" />
                <Star className="size-5 fill-yellow-400 text-yellow-400" />
                <Star className="size-5 fill-yellow-400 text-yellow-400" />
                <Star className="size-5 fill-yellow-400 text-yellow-400" />
                <span className="font-semibold">5.0</span>
              </div>
              <p className="text-start font-medium text-muted-foreground">
                از بیش از ۲۰۰ نظر
              </p>
            </div>
          </div>
          <div className="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
            <Button className="w-full sm:w-auto">ایجاد حساب کاربری</Button>
            <Button variant="outline" className="w-full sm:w-auto">
              شروع رایگان
                                        <ArrowDownRight className="ms-2 size-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero4 };