'use client';

import React, { useState } from 'react';
import { Copy, Check, Eye, EyeOff } from 'lucide-react';

interface ApiKeyVisibilityToggleProps {
    apiKey: string;
}

export default function ApiKeyVisibilityToggle({ apiKey }: ApiKeyVisibilityToggleProps) {
    const [isVisible, setIsVisible] = useState(false);
    const [copied, setCopied] = useState(false);

    const handleCopy = () => {
        navigator.clipboard.writeText(apiKey);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="bg-gray-50 p-5 rounded-2xl border border-gray-100 flex items-center justify-between gap-4">
            <code className="text-xs font-mono font-bold text-gray-600 truncate flex-1">
                {isVisible ? apiKey : `${apiKey.substring(0, 8)}${'•'.repeat(24)}`}
            </code>
            <div className="flex items-center gap-3 shrink-0">
                <button 
                    onClick={() => setIsVisible(!isVisible)}
                    className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
                    title={isVisible ? "Gizle" : "Göster"}
                >
                    {isVisible ? <EyeOff size={16} /> : <Eye size={16} />}
                </button>
                <button 
                    onClick={handleCopy}
                    className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
                    title="Kopyala"
                >
                    {copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
                </button>
            </div>
        </div>
    );
}