import React, { useMemo } from 'react';
import { lozenge, filterVariantProps } from '@trail-ui/theme';

export interface LozengeProps {
  value: string;
  size: 'xs' | 'sm' | 'md' | 'lg';
  color: 'default' | 'purple' | 'blue' | 'green' | 'yellow' | 'red';
  variant: 'solid' | 'light';
  className?: string;
}

function Lozenge(props: LozengeProps) {
  const { color, size, value, className } = props;
  const variantProps = filterVariantProps(props, lozenge.variantKeys);

  const styles = useMemo(
    () =>
      lozenge({
        ...variantProps,
        color,
        size,
      }),
    [variantProps, color, size],
  );

  return (
    <>
      <span className={`${className} ${styles}`}>{value}</span>
    </>
  );
}

export { Lozenge };