import { BackLink } from "@/components/back-link";
import { createShippingTierAction } from "../../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminVersandNewPage() {
  const t = getDictionary(await getLocale());

  return (
    <div className="max-w-md">
      <BackLink href="/admin/versand" label={t.adminShippingNewPage.backToShipping} />
      <h1 className="text-2xl text-forest mb-8">{t.adminShippingNewPage.title}</h1>


      <form action={createShippingTierAction} className="space-y-4 bg-background border border-ink/10 p-6">
        <div className="grid grid-cols-2 gap-4">
          <Field name="minQuantity" label={t.adminShippingNewPage.minQuantityLabel} type="number" required placeholder="0" />
          <Field name="maxQuantity" label={t.adminShippingNewPage.maxQuantityLabel} type="number" placeholder="3" />
        </div>
        <Field name="priceCents" label={t.adminShippingNewPage.priceLabel} type="number" required placeholder="700" />
        <button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
          {t.adminShippingNewPage.create}
        </button>
      </form>
    </div>
  );
}

function Field({
  name,
  label,
  type = "text",
  placeholder,
  required = false,
}: {
  name: string;
  label: string;
  type?: string;
  placeholder?: string;
  required?: boolean;
}) {
  return (
    <label className="block text-sm">
      <span className="text-ink/70">{label}</span>
      <input
        name={name}
        type={type}
        placeholder={placeholder}
        required={required}
        min={0}
        className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
      />
    </label>
  );
}