import { FaStar } from "react-icons/fa";

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

interface TestimonialCardProps {
  name: string;
  title: string;
  imageSrc: string;
  className?: string;
  style?: React.CSSProperties;
}

interface RatingDisplayProps {
  rating?: number;
  userCount?: number;
  className?: string;
  style?: React.CSSProperties;
  showAvatars?: boolean;
}

function TestimonialCard({
  name = "نام مشتری",
  title = "سمت سازمانی",
  imageSrc = "/block-media/shadcnblocks/block/avatar-1.webp",
  className,
  style,
}: TestimonialCardProps) {
  return (
    <div
      className={cn(
        "flex w-[320px] flex-col gap-4 rounded-lg bg-card p-6 shadow-sm",
        className,
      )}
      style={style}
    >
      <img
        src={imageSrc}
        alt={name}
        className="h-24 w-24 rounded-md object-cover"
      />
      <div className="flex gap-0.5">
        {Array(5)
          .fill(null)
          .map((_, i) => (
            <FaStar key={i} className="h-5 w-5 fill-yellow-400" />
          ))}
      </div>
      <div className="space-y-2">
        <div className="h-2 w-[80%] rounded bg-muted"></div>
        <div className="h-2 w-[90%] rounded bg-muted"></div>
        <div className="h-2 w-[60%] rounded bg-muted"></div>
      </div>
      <div className="space-y-1">
        <p className="font-semibold text-foreground">{name}</p>
        <p className="text-sm text-muted-foreground">{title}</p>
      </div>
    </div>
  );
}

function RatingDisplay({
  rating = 4.9,
  userCount = 500,
  className,
  style,
}: RatingDisplayProps) {
  return (
    <div className={cn("space-y-0.5", className)} style={style}>
      <div className="flex items-center gap-3">
        <div className="flex -space-x-[14px]">
          {[1, 2, 3, 4, 5].map((i) => (
            <Avatar key={i} className="size-12">
              <AvatarImage
                src={`/block-media/shadcnblocks/block/avatar-$%7Bi}.webp`}
              />
              <AvatarFallback>JD</AvatarFallback>
            </Avatar>
          ))}
        </div>
        <div>
          <div className="flex items-end gap-1.5">
            <div className="flex gap-1">
              {Array(5)
                .fill(null)
                .map((_, i) => (
                  <FaStar key={i} className="h-5 w-5 fill-yellow-400" />
                ))}
            </div>
            <p className="text-base leading-4 font-semibold text-foreground">
              {rating}
            </p>
          </div>
          <p className="text-sm font-medium whitespace-nowrap text-muted-foreground">
            + {userCount}به جمع هزاران کاربر راضی بپیوندید
                                </p>
        </div>
      </div>
    </div>
  );
}

const Hero64 = () => {
  return (
    <section className="py-12 md:py-20">
      <div className="container px-4 md:px-6">
        <div className="flex flex-col gap-8 md:flex-row">
          <div className="mx-auto flex items-start md:mx-0 md:w-1/2 md:items-center">
            <div className="text-center md:text-start">
              <h1 className="text-xl font-bold tracking-tight text-foreground sm:text-2xll/tight md:text-2xll/tight">
                از{" "}
                <span className="bg-linear-to-tr from-gray-600 to-gray-500 bg-clip-text text-transparent">
                  نظرات مشتریان
                                                  </span>{" "}
                برای افزایش اعتماد و فروش استفاده کنید.
                                            </h1>
              <p className="mx-auto mt-3 max-w-md text-base text-muted-foreground sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
                نظرات مشتریان راضی را جمع‌آوری و نمایش دهید تا اعتماد بسازید و
                نرخ تبدیل را بالا ببرید.
              </p>
              <div className="mt-6 flex justify-center md:hidden">
                <RatingDisplay />
              </div>
              <div className="mx-auto mt-8 w-fit md:ml-0">
                <Button size="lg" className="px-6">
                  همین امروز رایگان شروع کنید
                                                  </Button>
              </div>
            </div>
          </div>
          <div className="relative mx-auto h-[400px] w-full max-w-xl md:h-[540px] md:w-1/2">
            <div className="relative h-full">
              <TestimonialCard
                name="سارا جانسون"
                title="مدیر بازاریابی"
                imageSrc="/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg"
                className="absolute hidden rounded-lg border md:flex"
                style={{
                  left: "0",
                  top: "40%",
                  width: "50%",
                  height: "auto",
                }}
              />
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt=""
                className="absolute hidden rounded-lg md:block"
                style={{
                  right: "0",
                  top: "0",
                  width: "45%",
                  height: "42%",
                  objectFit: "cover",
                }}
              />
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
                alt=""
                className="absolute rounded-lg shadow-md"
                style={{
                  left: "50%",
                  top: "50%",
                  transform: "translate(-50%, -50%)",
                  width: "min(100%, 235.625px)",
                  height: "min(90%, 355.945px)",
                  objectFit: "cover",
                }}
              />
              <RatingDisplay className="absolute bottom-4 left-1/2 hidden w-[90%] -translate-x-1/2 rounded-md border bg-background px-3 py-2 shadow-lg md:top-[54%] md:right-0 md:bottom-auto md:left-auto md:flex md:w-auto md:translate-x-0" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero64 };