"use client";

import { Label } from "@/components/ui/label";
import { de } from "@/lib/i18n/de";

export interface TemplateOption {
  id: string;
  code: string;
  name: string;
}

interface Props {
  templates: TemplateOption[];
  value: string;
  onChange: (id: string) => void;
  disabled?: boolean;
}

/**
 * Auswahl einer Fahrzeug-Vorlage (oder „frei"). Reine Präsentation; das
 * Nachladen der Merkmale übernimmt das Formular.
 */
export function TemplatePicker({ templates, value, onChange, disabled }: Props) {
  return (
    <div className="grid gap-1.5">
      <Label htmlFor="templateId">{de.verwaltung.vorlage}</Label>
      <select
        id="templateId"
        name="templateId"
        disabled={disabled}
        className="h-10 w-full rounded border border-rand bg-white px-3 text-sm text-anthrazit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-navy disabled:opacity-50"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      >
        <option value="">{de.verwaltung.keineVorlage}</option>
        {templates.map((t) => (
          <option key={t.id} value={t.id}>
            {t.code} — {t.name}
          </option>
        ))}
      </select>
    </div>
  );
}
