import React from 'react';
import { Clipboard } from 'lucide-react';

interface ClipboardEvent {
    timestamp: Date;
    field: string;
    length: number;
}

interface ClipboardBadgeProps {
  events: ClipboardEvent[];
  onOpenClipboardModal: () => void; // New prop
}

const ClipboardBadge: React.FC<ClipboardBadgeProps> = ({ events, onOpenClipboardModal }) => {
  const count = events.length;

  // Determine badge style based on clipboard count
  const badgeStyle = 
    count === 0 
      ? "text-[#39ff14] bg-[#39ff14]/10 border-[#39ff14]/20" // Safe
      : count < 5
      ? "text-[#ff006e] bg-[#ff006e]/10 border-[#ff006e]/30 font-semibold" // Warning
      : "text-[#ff006e] bg-[#ff006e]/10 border-[#ff006e]/30 font-bold animate-pulse"; // Danger

  return (
    <button
      onClick={onOpenClipboardModal}
      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all hover:scale-105 ${badgeStyle}`}
    >
      <Clipboard className="w-3.5 h-3.5" />
      <span className="text-xs">
        {count === 0 ? "Empty" : `${count} item${count > 1 ? 's' : ''}`}
      </span>
    </button>
  );
};

export default ClipboardBadge;