import * as React from "react";

import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";

const inputVariants = cva({
  base: "flex h-10 w-full rounded-md bg-background px-3 py-2 text-sm text-secondary  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-secondary focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
  variants: {
    variant: {
      primary:
        "rounded-none border-b-[0.5px] border-b-primary bg-transparent font-normal text-secondary placeholder:text-secondary focus:outline-0",
      secondary:
        "rounded-none border-b-[0.5px] border-b-background-invert bg-transparent font-normal text-primary placeholder:text-slate-gray focus:outline-0 dark:border-b-white",
      none: "rounded-none border-0 bg-transparent font-normal text-secondary placeholder:text-secondary focus:outline-0",
      outline:
        "h-12 rounded-md border border-neutral-200 bg-white text-black placeholder:text-neutral-500",
    },
    size: {
      small:
        "placeholder:text-[13px] placeholder:leading-4 placeholder:tracking-[0.48px]",
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "small",
  },
});

export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
  VariantProps<typeof inputVariants>;

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, variant, size, ...props }, ref) => {
    const combinedProps = {
      className: cx(inputVariants({ variant, size, className })),
      ref,
      ...props,
    };
    return (
      <input
        type={type}
        {...(combinedProps as React.InputHTMLAttributes<HTMLInputElement>)}
      />
    );
  },
);
Input.displayName = "Input";