import { cva, type VariantProps } from "class-variance-authority";
import React from "react";
import { twMerge } from "tailwind-merge";

const textProps = cva(["fl-leading-none"], {
  variants: {
    size: {
      small: ["fl-text-xs"],
      medium: ["fl-text-base"],
      large: ["fl-text-xl"],
    },
  },
  defaultVariants: {
    size: "medium",
  },
});

export interface TextProps
  extends React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLSpanElement>,
      HTMLSpanElement
    >,
    VariantProps<typeof textProps> {}

const Text: React.FC<TextProps> = ({ className, size, ...props }) => (
  <span
    className={twMerge(textProps({ size, className }), className)}
    {...props}
  />
);

export default Text;