import type { RikxRonde } from "../../lib/db";

const inputClass =
  "h-10 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-rikx-orange";
const labelClass = "text-sm font-medium text-zinc-700 dark:text-zinc-300";

export const RONDE_ERRORS: Record<string, string> = {
  missing: "Vul een ronde label in.",
  invalid: "Rikx waarde en Rikx prijs mogen niet negatief zijn.",
  label: "Er bestaat al een ronde met dit label.",
};

// Gedeelde velden voor toevoegen en bewerken van een Rikx Ronde.
export function RondeFields({ ronde }: { ronde?: RikxRonde }) {
  return (
    <>
      <label className="flex flex-col gap-1">
        <span className={labelClass}>
          Ronde label<span className="text-red-500 ml-1">*</span>
        </span>
        <input name="label" required defaultValue={ronde?.label} placeholder="Rikx Ronde 5 – Rotterdam" className={inputClass} />
      </label>
      <label className="flex flex-col gap-1">
        <span className={labelClass}>Rikx waarde</span>
        <input name="rikx_waarde" type="number" min={0} step="any" defaultValue={ronde?.rikx_waarde ?? ""} className={inputClass} />
        <span className="text-xs text-zinc-500">Kosten/impact van het 75%-ste project in de ronde.</span>
      </label>
      <label className="flex flex-col gap-1">
        <span className={labelClass}>Rikx prijs (€)</span>
        <input name="rikx_prijs" type="number" min={0} step="0.01" defaultValue={ronde?.rikx_prijs ?? ""} className={inputClass} />
        <span className="text-xs text-zinc-500">Leeg laten = Rikx waarde / 10.</span>
      </label>
    </>
  );
}