import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';

import { tagStyles } from './styles';

export type TagVariant = 'default' | 'accent';

interface TagProps {
  children?: ReactNode;
  variant?: TagVariant;
}

export const Tag = ({ children, variant = 'default' }: TagProps) => {
  return (
    <div {...stylex.props(tagStyles.base, tagStyles[variant])}>{children}</div>
  );
};