import { cn } from "@/lib/cn";

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
};

/** Labeled text input with shared focus styles. */
export function Input({ label, className, id, ...props }: InputProps) {
  const inputId = id ?? props.name;
  return (
    <label className="block w-full">
      {label ? (
        <span className="mb-2 block text-sm font-medium text-foreground">
          {label}
        </span>
      ) : null}
      <input
        id={inputId}
        className={cn(
          "h-11 w-full rounded-2xl border border-border bg-background px-4 text-sm text-foreground outline-none transition placeholder:text-muted focus:border-foreground focus:ring-1 focus:ring-foreground dark:bg-surface",
          className,
        )}
        {...props}
      />
    </label>
  );
}