import * as React from "react";
import { cn } from "@/lib/utils";
import { useLocaleDirection } from "@/hooks/useLocale";

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

interface InputWithLabelProps extends React.ComponentProps<"input"> {
  label: string;
  required?: boolean;
}

function InputWithLabel({
  className,
  type,
  label,
  required,
  ...props
}: InputWithLabelProps) {
  const { locale } = useLocaleDirection();
  return (
    <div className="relative w-full bg-white rounded-[8px]">
      <input
        type={type}
        placeholder=" "
        className={cn(
          "peer w-full h-11 flex-1 px-4 rounded-[8px] border border-[#DFE3E8] text-black focus:outline-none focus:border-secondary-main relative z-2",
          locale === "ar" ? "text-right" : "text-left",
          className
        )}
        required={required}
        {...props}
      />
      <label
        className={cn(
          "absolute start-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none",
          "peer-placeholder-shown:block peer-not-placeholder-shown:hidden"
        )}
      >
        {label} {required && <span className="text-red-500">*</span>}
      </label>
    </div>
  );
}

export { Input, InputWithLabel };