import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export default function LabeledInput({
  type,
  label,
  placeholder,
  value,
  ...props
}: {
  type: 'text' | 'email' | 'password';
  label: string;
  placeholder?: string;
  value?: string;
} & React.InputHTMLAttributes<HTMLInputElement>) {
  const elementId = Math.random().toString(36).substring(2, 15);

  return (
    <div className='flex flex-col gap-1'>
      <Label htmlFor={name}>{label}</Label>

      <Input
        type={type}
        placeholder={placeholder}
        defaultValue={value}
        id={elementId}
        {...props}
      />
    </div>
  );
}