'use client';

import React from 'react';
import { Select, Tag } from 'antd';
import type { SelectProps } from 'antd';

interface TagSelectProps extends SelectProps {
    value?: string[];
    onChange?: (tags: string[]) => void;
    tagColors?: Record<string, string>;
}

export function TagSelect({
    value = [],
    onChange,
    tagColors = {},
    ...selectProps
}: TagSelectProps) {
    const handleChange = (selectedValues: string[]) => {
        onChange?.(selectedValues);
    };

    const tagRender = (props: {
        label: React.ReactNode;
        value: string;
        closable?: boolean;
        onClose?: () => void;
    }) => {
        const { label, value: tagValue, closable, onClose } = props;
        const color = tagColors[tagValue] || 'default';

        return (
            <Tag color={color} closable={closable} onClose={onClose} style={{ marginRight: 3 }}>
                {label}
            </Tag>
        );
    };

    return (
        <Select
            mode="multiple"
            value={value}
            onChange={handleChange}
            tagRender={tagRender}
            placeholder="Selecione tags..."
            style={{ width: '100%' }}
            {...selectProps}
        />
    );
}