import { cva, VariantProps } from 'class-variance-authority';
import type { ComponentProps } from 'react';

import './tag.css';

type TagStylesProps = VariantProps<typeof tagStyles>;
const tagStyles = cva('c-tag', {
  variants: {
    variant: {
      default: '',
      elevate: 'c-tag-elevate',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export type TagProps = ComponentProps<'span'> & TagStylesProps;

export function Tag({ children, className, variant, ...delegated }: TagProps) {
  return (
    <span className={tagStyles({ className, variant })} {...delegated}>
      {children}
    </span>
  );
}
