import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import Stars from "@/components/widgets/Stars/Stars";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { Card } from "..";
import { ArrowRight } from "lucide-react";
import Avatar from "@/components/ui/Avatar/Avatar";

interface ReviewProps extends React.ComponentProps<typeof Card> {
  avatar?: React.ComponentProps<typeof Avatar>;
  name?: TypographyProps<"span">;
  stars?: React.ComponentProps<typeof Stars>;
  date?: TypographyProps<"span">;
  text?: TypographyProps<"p">;
  portrait?: React.ComponentProps<typeof Image>;
  photo?: React.ComponentProps<typeof Image>;
}

export default function Review({
  stars,
  avatar,
  name,
  date,
  text,
  portrait,
  photo,
  ...props
}: ReviewProps) {
  return (
    <Card {...props}>
      <div className={cn("w-full flex items-center gap-3")}>
        {avatar && (
          <Avatar {...avatar} className={cn("size-10", avatar.className)} />
        )}
        <div className={cn("flex flex-col gap-0.5")}>
          {name && (
            <Typography
              font="inter"
              weight="semiBold"
              size="sm"
              {...name}
              className={cn(
                "text-trial-payment-foreground leading-[20px]",
                name.className
              )}
            />
          )}
          <div className={cn("flex items-center gap-2")}>
            {stars && <Stars {...stars} />}
            {date && (
              <Typography
                font="inter"
                size="xs"
                {...date}
                className={cn("text-[#6B7280] leading-4", date.className)}
              />
            )}
          </div>
        </div>
      </div>
      {text && (
        <Typography
          font="inter"
          size="sm"
          {...text}
          className={cn("text-trial-payment-foreground mt-3.5", text.className)}
        />
      )}
      <div className={cn("w-full flex items-center gap-[9px] mt-5")}>
        {portrait && (
          <Image
            width={64}
            height={64}
            {...portrait}
            alt={portrait.alt || "Portrait"}
            className={cn(
              "size-16 rounded-[8px] object-cover border-2 border-border-white shadow-trial-payment-review-photo",
              portrait.className
            )}
          />
        )}
        <ArrowRight color={"var(--color-primary)"} />
        {photo && (
          <Image
            width={64}
            height={64}
            {...photo}
            alt={photo.alt || "Photo"}
            className={cn(
              "size-16 rounded-[8px] object-cover border-2 border-border-white shadow-trial-payment-review-photo",
              photo.className
            )}
          />
        )}
      </div>
    </Card>
  );
}