import { cn } from "@/lib/utils";
import Avatars from "../Avatars/Avatars";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";

type MediaType = "image" | "video" | "gif";

interface SoulmatePortraitsDeliveredProps extends React.ComponentProps<"div"> {
  image?: string; // Legacy: используется как background если нет mediaUrl
  mediaType?: MediaType;
  mediaUrl?: string; // Приоритет над image
  textProps?: TypographyProps<"p">;
  avatarsProps?: React.ComponentProps<typeof Avatars>;
}

export default function SoulmatePortraitsDelivered({
  image,
  mediaType = "image",
  mediaUrl,
  avatarsProps,
  textProps,
  ...props
}: SoulmatePortraitsDeliveredProps) {
  // Определяем финальный URL медиа (приоритет у mediaUrl)
  const finalMediaUrl = mediaUrl || image;
  const finalMediaType = mediaUrl ? mediaType : "image";
  const shouldRenderVideo = finalMediaType === "video" || finalMediaType === "gif";

  return (
    <div
      {...props}
      className={cn(
        "relative flex flex-col items-center justify-end",
        "w-full max-w-[336px] h-[220px]",
        "p-5",
        "rounded-3xl overflow-hidden",
        "shadow-soulmate-portrait",
        props.className
      )}
    >
      {/* Background Media */}
      {shouldRenderVideo && finalMediaUrl ? (
        <video
          src={finalMediaUrl}
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        />
      ) : finalMediaUrl ? (
        <div
          className="absolute inset-0 w-full h-full bg-cover bg-top bg-no-repeat"
          style={{
            backgroundImage: `url(${finalMediaUrl})`,
          }}
        />
      ) : null}

      {/* Content Overlay */}
      <div className={cn("relative z-10 flex gap-[9px]")}>
        {avatarsProps && <Avatars {...avatarsProps} />}
        {textProps && (
          <Typography
            size="sm"
            weight="medium"
            color="primary"
            {...textProps}
            className={cn(
              "leading-[20px] text-shadow-lg/50",
              textProps.className
            )}
          />
        )}
      </div>
    </div>
  );
}
