Input

import type { FC, JSX } from "hono/jsx";
import { cn } from "@/lib/utils";

const inputVariants = {
  variant: {
    default: "border-input border bg-card",
    ghost:
      "border border-transparent bg-transparent shadow-none hover:bg-secondary focus-visible:bg-background focus-visible:border-ring",
  },
  size: {
    default: "h-9",
    sm: "h-8",
  },
};

type InputProps = Omit<JSX.IntrinsicElements["input"], "size"> & {
  variant?: keyof typeof inputVariants.variant;
  size?: keyof typeof inputVariants.size;
};

export const Input: FC<InputProps> = ({
  type,
  variant = "default",
  size = "default",
  class: className,
  ...props
}) => {
  const isDateInput = type === "date";

  return (
    <input
      type={type}
      data-slot="input"
      class={cn(
        "file:text-foreground placeholder:text-foreground-soft selection:bg-primary selection:text-primary-foreground",
        "flex w-full min-w-0 rounded-lg px-3 py-1 text-base",
        "transition-[color,box-shadow,background-color] outline-none",
        "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
        "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
        "md:text-sm",
        inputVariants.variant[variant],
        inputVariants.size[size],
        isDateInput &&
          "relative pr-10 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:right-3 [&::-webkit-calendar-picker-indicator]:m-0 [&::-webkit-calendar-picker-indicator]:h-4 [&::-webkit-calendar-picker-indicator]:w-4 [&::-webkit-calendar-picker-indicator]:cursor-pointer",
        className,
      )}
      {...props}
    />
  );
};