import React from 'react';
import { LucideIcon } from 'lucide-react';

interface ChipProps {
  label: string;
  onDismiss?: () => void;
  icon?: LucideIcon;
  variant?: 'default' | 'outlined' | 'solid';
  color?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
}

const colorMap = {
  primary: {
    default: 'bg-blue-100 text-blue-700 border-blue-200',
    outlined: 'bg-transparent text-blue-600 border-blue-600',
    solid: 'bg-blue-600 text-white border-blue-600',
  },
  secondary: {
    default: 'bg-slate-100 text-slate-700 border-slate-200',
    outlined: 'bg-transparent text-slate-600 border-slate-600',
    solid: 'bg-slate-600 text-white border-slate-600',
  },
  danger: {
    default: 'bg-red-100 text-red-700 border-red-200',
    outlined: 'bg-transparent text-red-600 border-red-600',
    solid: 'bg-red-600 text-white border-red-600',
  },
  success: {
    default: 'bg-green-100 text-green-700 border-green-200',
    outlined: 'bg-transparent text-green-600 border-green-600',
    solid: 'bg-green-600 text-white border-green-600',
  },
  warning: {
    default: 'bg-yellow-100 text-yellow-700 border-yellow-200',
    outlined: 'bg-transparent text-yellow-600 border-yellow-600',
    solid: 'bg-yellow-600 text-white border-yellow-600',
  },
};

export default function Chip({
  label,
  onDismiss,
  icon: Icon,
  variant = 'default',
  color = 'primary',
}: ChipProps) {
  const colorClasses = colorMap[color][variant];

  return (
    <div
      className={`
        inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full border text-sm font-medium transition-colors
        ${colorClasses}
      `}
    >
      {Icon && <Icon className="w-3.5 h-3.5" />}
      <span>{label}</span>
      {onDismiss && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onDismiss();
          }}
          className="ml-0.5 p-0.5 rounded-full hover:bg-black/10 transition-colors"
          aria-label={`Remove ${label}`}
        >
          <svg
            className="w-3 h-3"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2.5}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
}