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-green-500 bg-green-500/10 border-green-500/20" // Safe
      : count < 5
      ? "text-amber-500 bg-amber-500/10 border-amber-500/30 font-semibold" // Warning
      : "text-red-500 bg-red-500/10 border-red-500/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;