'use client';
import React from 'react';
import {SpellTagProps} from "@/lib/models/Spell";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faX} from "@fortawesome/free-solid-svg-icons";

interface SpellTagChipProps {
    tag: SpellTagProps;
    onRemove?: () => void;
    onClick?: () => void;
    size?: 'sm' | 'md';
}

export default function SpellTagChip(
    {
        tag,
        onRemove,
        onClick,
        size = 'md'
    }: SpellTagChipProps) {
    
    function getContrastColor(hexColor: string | null): string {
        if (!hexColor) return '#FFFFFF';
        const hex = hexColor.replace('#', '');
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
        return luminance > 0.5 ? '#1F2023' : '#FFFFFF';
    }
    
    const sizeClasses = size === 'sm'
        ? 'px-2 py-0.5 text-xs'
        : 'px-3 py-1 text-sm';
    
    const chipClasses = `
        inline-flex items-center gap-1.5 rounded-full font-medium
        transition-all duration-200
        ${sizeClasses}
        ${onClick ? 'cursor-pointer hover:scale-105 hover:shadow-md' : ''}
    `;
    
    return (
        <span
            className={chipClasses}
            style={{
                backgroundColor: tag.color || '#3B82F6',
                color: getContrastColor(tag.color)
            }}
            onClick={onClick}
        >
            {tag.name}
            {onRemove && (
                <button
                    onClick={(e: React.MouseEvent): void => {
                        e.stopPropagation();
                        onRemove();
                    }}
                    className="ml-0.5 hover:bg-white/20 rounded-full p-0.5 transition-all duration-200 hover:scale-110"
                >
                    <FontAwesomeIcon icon={faX} className={size === 'sm' ? 'w-2 h-2' : 'w-2.5 h-2.5'}/>
                </button>
            )}
        </span>
    );
}
