interface FormFieldProps {
  label: string;
  type?: string;
  name: string;
  placeholder?: string;
  autoComplete?: string;
}

export default function FormField({ label, type = "text", name, placeholder, autoComplete }: FormFieldProps) {
  return (
    <div className="flex flex-col gap-2 mb-4">
      <label htmlFor={name} className="font-mono text-xs uppercase tracking-widest text-ink-soft">
        {label}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        placeholder={placeholder}
        autoComplete={autoComplete}
        suppressHydrationWarning
        className="w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold focus:border-forest"
      />
    </div>
  );
}