"use client";

import React, { useState } from "react";
import { FileText, Copy, Check } from "lucide-react";
import styles from "./BookingStatusComponents.module.css";

interface BookingStatusCodeProps {
  bookingCode: string;
}

export default function BookingStatusCode({ bookingCode }: BookingStatusCodeProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      if (typeof navigator !== "undefined" && navigator.clipboard) {
        await navigator.clipboard.writeText(bookingCode);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      }
    } catch {
      // Fallback ignore
    }
  };

  return (
    <div className={styles.bookingCodePanel}>
      <div className={styles.codeIconWrap} aria-hidden="true">
        <FileText size={20} className={styles.codeIcon} />
      </div>

      <div className={styles.codeMeta}>
        <span className={styles.codeLabel}>Kode Booking</span>
        <span className={styles.codeValue} id="booking-status-code-value">
          {bookingCode}
        </span>
      </div>

      <button
        type="button"
        onClick={handleCopy}
        className={styles.copyBtn}
        aria-label={`Salin kode booking ${bookingCode}`}
        id="booking-copy-code-btn"
      >
        {copied ? (
          <>
            <Check size={16} className={styles.copyIconSuccess} aria-hidden="true" />
            <span className={styles.copyTextSuccess}>Tersalin!</span>
          </>
        ) : (
          <>
            <Copy size={16} className={styles.copyIcon} aria-hidden="true" />
            <span className={styles.copyText}>Salin</span>
          </>
        )}
      </button>
    </div>
  );
}