"use client";

import { LockKeyhole } from "lucide-react";

import styles from "./private-message-card.module.css";

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

export function PrivateMessageCard({
  hint,
  isUnlocking = false,
  onUnlock,
}: PrivateMessageCardProps) {
  return (
    <div className={styles.card} role="group" aria-label="Locked private message">
      <div className={styles.iconWrap} aria-hidden="true">
        <LockKeyhole className={styles.icon} size={22} />
      </div>
      <p className={styles.hint}>
        {hint && hint.length > 0
          ? hint
          : "Elio has a private message for you."}
      </p>
      <button
        type="button"
        className={styles.button}
        disabled={isUnlocking || !onUnlock}
        onClick={onUnlock}
      >
        {isUnlocking ? "Unlocking..." : "Unlock private message"}
      </button>
    </div>
  );
}