"use client";

import { ImageIcon, LockKeyhole } from "lucide-react";

export interface LockedImageMessageCardProps {
  hint?: string | null;
  isUnlocking?: boolean;
  onUnlock?: () => void;
}

export function LockedImageMessageCard({
  hint,
  isUnlocking = false,
  onUnlock,
}: LockedImageMessageCardProps) {
  return (
    <div
      className="w-[min(72vw,280px)] overflow-hidden rounded-(--responsive-card-radius-sm,18px) rounded-tl-none border border-[rgba(246,87,160,0.2)] bg-white shadow-[0_4px_14px_rgba(246,87,160,0.14)]"
      role="group"
      aria-label="Locked private image"
    >
      <div className="relative flex h-32 items-center justify-center bg-[linear-gradient(145deg,#ffeaf3,#fff7fb)] text-[#f657a0]">
        <ImageIcon size={46} strokeWidth={1.5} aria-hidden="true" />
        <span className="absolute flex size-10 items-center justify-center rounded-full bg-white/90 shadow-sm">
          <LockKeyhole size={19} aria-hidden="true" />
        </span>
      </div>
      <div className="p-(--responsive-card-padding,14px)">
        <p className="m-0 text-(length:--responsive-body,14px) leading-[1.4] text-[#3c3b3b]">
          {hint && hint.length > 0
            ? hint
            : "Elio sent you a locked image."}
        </p>
        <button
          type="button"
          data-analytics-key="chat.unlock_message"
          data-analytics-label="Unlock private image"
          className="mt-(--spacing-md,12px) w-full cursor-pointer rounded-full border-0 bg-[linear-gradient(90deg,#ff67e0,#ff52a2)] px-(--spacing-md,12px) py-[clamp(9px,1.852vw,10px)] text-(length:--responsive-body,14px) font-bold text-white disabled:cursor-not-allowed disabled:opacity-65 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
          disabled={isUnlocking || !onUnlock}
          onClick={onUnlock}
        >
          {isUnlocking ? "Unlocking..." : "Unlock private image"}
        </button>
      </div>
    </div>
  );
}