/**
 * Tool Chip Component
 * @description Displays a tool chip with name, close button, and redirect button
 */

import { X, ArrowRight } from 'lucide-react';
import type { Tool } from '@/types';

/**
 * ToolChip component props
 */
interface ToolChipProps {
    /** Tool object to display */
    tool: Tool;
    /** Callback when delete button is clicked */
    onDelete: (id: string) => void;
    /** Callback when redirect button is clicked */
    onRedirect: (id: string) => void;
}

/**
 * ToolChip component
 * @description Chip component for displaying tools with delete and redirect actions
 * Matches Figma design with exact styling
 * @param tool - The tool object containing id, name, and color
 * @param onDelete - Callback function called when delete button is clicked, receives tool id
 * @param onRedirect - Callback function called when redirect button is clicked, receives tool id
 * @returns {JSX.Element} A chip component displaying the tool with action buttons
 */
export function ToolChip({ tool, onDelete, onRedirect }: ToolChipProps): JSX.Element {
    return (
        <div className="bg-white border border-[#eef1f7] border-solid flex gap-8 h-[32px] items-center px-3 py-[5px] relative rounded-[6px] shrink-0">
            <div className="flex items-center relative shrink-0">
                <p
                    className="font-normal leading-[1.5] not-italic relative shrink-0 text-[14px]"
                    style={{ color: tool.color }}
                >
                    {tool.name}
                </p>
            </div>
            <div className="flex gap-1 items-center justify-end leading-[0] relative shrink-0">
                {/* Close Button - matches Figma design */}
                <button
                    type="button"
                    onClick={() => onDelete(tool.id)}
                    className="relative size-[18px] flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity group"
                    aria-label={`Delete ${tool.name}`}
                >
                    <div className="absolute inset-0 size-[18px] rounded-full bg-[rgba(0,0,0,0.08)] group-hover:bg-[rgba(0,0,0,0.12)] transition-colors" />
                    <X className="absolute size-[14.4px] text-black ml-[1.8px] mt-[2.1px]" strokeWidth={2} />
                </button>
                
                {/* Redirect Button - matches Figma design */}
                <button
                    type="button"
                    onClick={() => onRedirect(tool.id)}
                    className="relative size-[16px] flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity group"
                    aria-label={`Configure ${tool.name}`}
                >
                    <div className="absolute inset-0 size-[16px] rounded-full bg-[rgba(0,0,0,0.08)] group-hover:bg-[rgba(0,0,0,0.12)] transition-colors" />
                    <ArrowRight className="absolute size-[12.8px] text-black ml-[1.78px] mt-[1.78px]" strokeWidth={2} />
                </button>
            </div>
        </div>
    );
}