import { ActionButton } from "@/components/ui/ActionButton/ActionButton";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import Image from "next/image";

interface UsersPortraitsProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  imgs?: React.ComponentProps<typeof Image>[];
  button?: React.ComponentProps<typeof ActionButton>;
}

export default function UsersPortraits({
  title,
  imgs,
  button,
  ...props
}: UsersPortraitsProps) {
  return (
    <div {...props} className={cn("w-full", props.className)}>
      {title && (
        <Typography
          as="h3"
          weight="bold"
          font="inter"
          align="center"
          size="2xl"
          {...title}
          className={cn(
            "leading-[28px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      <div
        className={cn(
          "w-[calc(100%+34px)]",
          "flex items-center gap-2",
          "mt-4 ml-[-17px]",
          "overflow-x-auto no-scrollbar"
        )}
      >
        {imgs &&
          imgs.map((img, index) => (
            <Image
              width={130}
              height={195}
              {...img}
              key={index}
              alt={img.alt}
              className={cn(
                "rounded-[12px] object-cover",
                index === 0 && "ml-[17px]",
                index === imgs.length - 1 && "mr-[17px]",
                img.className
              )}
            />
          ))}
      </div>
      {button && (
        <ActionButton
          {...button}
          className={cn(
            "mt-4 font-medium text-[18px] animate-scale-pulse",
            button.className
          )}
        />
      )}
    </div>
  );
}
