import { cva } from "class-variance-authority";

import styles from "./input.module.css";

export const containerVariants = cva(styles.container, {
  variants: {
    size: {
      md: "h-[44px]",
      lg: "h-[54px]",
    },
    invalid: {
      true: styles.invalid,
    },
    fullWidth: {
      true: "!max-w-full",
    },
    disabled: {
      true: styles.disabled,
    },
  },
  defaultVariants: {
    size: "md",
    invalid: false,
    fullWidth: false,
    disabled: false,
  },
});

export const iconVariants = cva(styles.icon, {
  variants: {
    size: {
      md: "mx-[8px]",
      lg: "mx-[12px]",
    },
    position: {
      left: "order-first ml-0",
      right: "order-last mr-0",
    },
  },
  defaultVariants: {
    size: "md",
    position: "left",
  },
});

export const labelVariants = cva(styles.label, {
  variants: {
    textSize: {
      md: "peer-placeholder-shown:!text-[14px] peer-focus-visible:-mb-1 peer-focus-visible:!text-[12px]",
      lg: "peer-placeholder-shown:!text-[14px] peer-focus-visible:!text-[12px]",
    },
  },
  defaultVariants: {
    textSize: "md",
  },
});

export const inputVariants = cva(styles.input, {
  variants: {
    size: {
      md: "",
      lg: "",
    },
    hasLabel: {
      true: styles.input_hasLabel,
    },
  },
  defaultVariants: {
    size: "md",
    hasLabel: false,
  },
});