import { cn } from "@/lib/utils";
import { Input } from "../input";
import { Label } from "../label";
import { useId } from "react";

interface TextInputProps extends React.ComponentProps<typeof Input> {
  label?: string;
}

function TextInput({ className, label, ...props }: TextInputProps) {
  const id = useId();
  const inputId = props.id || id;

  return (
    <div className="flex flex-col gap-2">
      {label && (
        <Label
          htmlFor={inputId}
          className="text-muted-foreground font-inter font-medium text-base"
        >
          {label}
        </Label>
      )}
      <Input
        data-slot="text-input"
        className={cn(
          "py-3.5 px-4",
          "font-inter text-[18px]/[28px] font-semibold text-foreground",
          "placeholder:text-muted-foreground placeholder:text-[18px]/[28px] font-medium",
          "border-2 border-primary/30 rounded-2xl",
          className
        )}
        id={inputId}
        {...props}
      />
      {props["aria-invalid"] && (
        <p className="text-destructive font-inter font-medium text-xs">
          {props["aria-errormessage"]}
        </p>
      )}
    </div>
  );
}

export { TextInput };