import * as React from 'react';
import { cn } from '../../shared/utils';

export type BlockColor =
  | 'primary'
  | 'chart-1'
  | 'chart-2'
  | 'chart-3'
  | 'chart-4'
  | 'chart-5'
  | 'success'
  | 'info'
  | 'warning'
  | 'destructive';

const colorTokens: Record<BlockColor, { border: string; tint: string; icon: string }> = {
  primary: { border: 'border-primary', tint: 'bg-primary/5', icon: 'text-primary' },
  'chart-1': {
    border: 'border-[var(--chart-1)]',
    tint: 'bg-[var(--chart-1)]/5',
    icon: 'text-[var(--chart-1)]',
  },
  'chart-2': {
    border: 'border-[var(--chart-2)]',
    tint: 'bg-[var(--chart-2)]/5',
    icon: 'text-[var(--chart-2)]',
  },
  'chart-3': {
    border: 'border-[var(--chart-3)]',
    tint: 'bg-[var(--chart-3)]/5',
    icon: 'text-[var(--chart-3)]',
  },
  'chart-4': {
    border: 'border-[var(--chart-4)]',
    tint: 'bg-[var(--chart-4)]/5',
    icon: 'text-[var(--chart-4)]',
  },
  'chart-5': {
    border: 'border-[var(--chart-5)]',
    tint: 'bg-[var(--chart-5)]/5',
    icon: 'text-[var(--chart-5)]',
  },
  success: { border: 'border-success', tint: 'bg-success/5', icon: 'text-success' },
  info: { border: 'border-info', tint: 'bg-info/5', icon: 'text-info' },
  warning: { border: 'border-warning', tint: 'bg-warning/5', icon: 'text-warning' },
  destructive: { border: 'border-destructive', tint: 'bg-destructive/5', icon: 'text-destructive' },
};

export interface PillBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  children: React.ReactNode;
  icon?: React.ReactNode;
  color?: BlockColor;
}

/**
 * Small outlined tag used as "eyebrow" text above marketing headlines.
 *
 * @description
 * A compact, token-driven chip (e.g. "AI ADOPTION PLATFORM") that pairs an
 * optional leading icon with short uppercase text, tinted via the shared
 * color-chip palette so it reskins across all Xertica-ui themes.
 *
 * @ai-rules
 * 1. Keep `children` short — this is an eyebrow label, not a paragraph.
 * 2. Pass `icon` as a small lucide-react icon element; it is sized automatically.
 * 3. Use `color` to match the section's accent; defaults to `primary`.
 */
export function PillBadge({
  children,
  icon,
  color = 'primary',
  className,
  ...props
}: PillBadgeProps) {
  const { border, tint, icon: textColor } = colorTokens[color];

  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide',
        border,
        tint,
        textColor,
        className
      )}
      {...props}
    >
      {icon && (
        <span className="flex items-center [&>svg]:size-3.5" aria-hidden="true">
          {icon}
        </span>
      )}
      {children}
    </span>
  );
}