---
export interface Props {
  label: string;
  name: string;
  type?: 'text' | 'email' | 'tel' | 'textarea';
  placeholder?: string;
  required?: boolean;
  rows?: number;
}

const {
  label,
  name,
  type = 'text',
  placeholder = '',
  required = false,
  rows = 5,
} = Astro.props;
---

<div>
  <label class="block text-sm font-bold text-terciaryColor mb-2">
    {label}
  </label>
  {type === 'textarea' ? (
    <textarea
      name={name}
      rows={rows}
      required={required}
      class="w-full px-4 py-3 border rounded-lg bg-white/5 text-white placeholder:text-white/40 border-white/20 focus:outline-none focus:border-terciaryColor/60 transition-colors"
      placeholder={placeholder}
    ></textarea>
  ) : (
    <input
      type={type}
      name={name}
      required={required}
      class="w-full px-4 py-3 border rounded-lg bg-white/5 text-white placeholder:text-white/40 border-white/20 focus:outline-none focus:border-terciaryColor/60 transition-colors"
      placeholder={placeholder}
    />
  )}
</div>