'use client';

import { Copy } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import { Tag, Tooltip, Button, Space } from 'antd';


import { message } from '@/lib/feedback/message';
interface ChaveTarefaProps {
    chave: string;
    tarefaId?: number | string;
    showCopy?: boolean;
    size?: 'small' | 'default' | 'large';
    color?: string;
}

export function ChaveTarefa({
    chave,
    tarefaId: _tarefaId,
    showCopy = true,
    size: _size = 'default',
    color,
}: ChaveTarefaProps) {
    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(chave);
            message.success('Chave copiada para a área de transferência!');
        } catch (err) {
            message.error('Erro ao copiar chave');
        }
    };

    if (!chave) {
        return null;
    }

    return (
        <Space>
            <Tag color={color} style={{ cursor: 'default' }}>
                {chave}
            </Tag>
            {showCopy && (
                <Tooltip title="Copiar chave">
                    <Button
                        type="text"
                        size="small"
                        icon={<Copy />}
                        onClick={handleCopy}
                        style={{ padding: 0, height: 'auto' }}
                    />
                </Tooltip>
            )}
        </Space>
    );
}