import type { ElementType, ReactNode } from 'react';

type ChipVariant = 'solid' | 'outlined';
type ChipTone = 'neutral' | 'indigo' | 'cyan';

type ChipProps<T extends ElementType> = {
  variant?: ChipVariant;
  tone?: ChipTone;
  as?: T;
  className?: string;
  children: ReactNode;
};

const variantClassMap: Record<ChipVariant, string> = {
  solid: 'chip-solid',
  outlined: 'chip-outlined'
};

const toneClassMap: Record<ChipTone, string> = {
  neutral: 'chip-neutral',
  indigo: 'chip-indigo',
  cyan: 'chip-cyan'
};

export function Chip<T extends ElementType = 'span'>({
  variant = 'solid',
  tone = 'neutral',
  as,
  className = '',
  children
}: Readonly<ChipProps<T>>) {
  const Component = as ?? 'span' as ElementType;
  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();

  return <Component className={classes}>{children}</Component>;
}