import React from 'react';

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

interface ClipboardDetailsProps {
  events: ClipboardEvent[];
  onClear: () => void;
}

export const ClipboardDetails: React.FC<ClipboardDetailsProps> = ({ events, onClear }) => {
    return (
        <div>
            {events.length > 0 && (
                <div className="mb-3 bg-orange-100 border border-orange-300 rounded-md p-3 text-xs text-orange-900">
                    <strong>⚠️ Clipboard Warning:</strong> Copied data is accessible to other apps,
                    browser tabs, and extensions. Clear clipboard after use.
                </div>
            )}

            {events.length > 0 ? (
                <>
                    <div className="space-y-2 mb-3 max-h-64 overflow-y-auto">
                        {events.map((event, idx) => (
                            <div
                                key={idx}
                                className="bg-white border border-orange-200 rounded-md p-2 text-xs"
                            >
                                <div className="flex justify-between items-start gap-2 mb-1">
                                    <span className="font-semibold text-orange-900 break-all">
                                        {event.field}
                                    </span>
                                    <span className="text-gray-400 text-[10px] whitespace-nowrap">
                                        {event.timestamp.toLocaleTimeString()}
                                    </span>
                                </div>
                                <div className="text-gray-600 text-[10px]">
                                    Copied {event.length} character{event.length !== 1 ? 's' : ''}
                                </div>
                            </div>
                        ))}
                    </div>

                    <button
                        onClick={onClear}
                        className="w-full text-xs py-2 px-3 bg-orange-600 hover:bg-orange-700 text-white rounded-md font-medium transition-colors"
                    >
                        🗑️ Clear Clipboard & History
                    </button>
                </>
            ) : (
                <div className="text-center py-4">
                    <div className="text-3xl mb-2">✅</div>
                    <p className="text-xs text-gray-500">No clipboard activity detected</p>
                </div>
            )}
        </div>
    );
};
