import React from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";

/**
 * TagBadge Component
 *
 * Displays a single tag with color indicator and optional remove button.
 *
 * @param {Object} props
 * @param {Object} props.tag - Tag object with id, name, and color
 * @param {Function} props.onRemove - Optional callback when remove button is clicked
 * @param {Function} props.onClick - Optional callback when tag is clicked
 * @param {boolean} props.removable - Whether to show remove button (default: false)
 * @param {boolean} props.clickable - Whether tag is clickable (default: false)
 * @param {string} props.size - Size variant: 'sm', 'md', 'lg' (default: 'md')
 */
export default function TagBadge({
  tag,
  onRemove,
  onClick,
  removable = false,
  clickable = false,
  size = "md"
}) {
  if (!tag) return null;

  const sizeClasses = {
    sm: "px-2 py-0.5 text-xs",
    md: "px-3 py-1 text-sm",
    lg: "px-4 py-1.5 text-base"
  };

  const dotSizeClasses = {
    sm: "w-2 h-2",
    md: "w-3 h-3",
    lg: "w-4 h-4"
  };

  const iconSizeClasses = {
    sm: "h-2.5 w-2.5",
    md: "h-3 w-3",
    lg: "h-4 w-4"
  };

  const handleClick = (e) => {
    if (clickable && onClick) {
      e.stopPropagation();
      onClick(tag);
    }
  };

  const handleRemove = (e) => {
    e.stopPropagation();
    if (onRemove) {
      onRemove(tag);
    }
  };

  return (
    <span
      className={`
        inline-flex items-center rounded-full font-medium bg-gray-100
        ${sizeClasses[size]}
        ${clickable ? 'cursor-pointer hover:bg-gray-200 transition-colors' : ''}
      `}
      onClick={handleClick}
      role={clickable ? "button" : undefined}
      tabIndex={clickable ? 0 : undefined}
    >
      <span
        className={`rounded-full mr-2 flex-shrink-0 ${dotSizeClasses[size]}`}
        style={{ backgroundColor: tag.color }}
        aria-label={`Tag color: ${tag.color}`}
      />
      <span className="truncate max-w-[120px]">{tag.name}</span>
      {removable && (
        <button
          type="button"
          onClick={handleRemove}
          className="ml-1 text-gray-500 hover:text-gray-700 focus:outline-none"
          aria-label={`Remove tag ${tag.name}`}
        >
          <XMarkIcon className={iconSizeClasses[size]} />
        </button>
      )}
    </span>
  );
}
