import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { createShopArticle } from "@/actions/admin-shop";
import { Package } from "lucide-react";

export default async function NewShopArticle() {
  const t = await getTranslations("pages.admin.shop");

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Package size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("newPackageTitle")}</h1>
          <Link href="/admin/shop" className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-primary)]">
            ← {t("backToShop")}
          </Link>
        </div>
      </div>

      <form action={createShopArticle} className="admin-card">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <input name="name" placeholder={t("form.namePlaceholder")} required maxLength={255} className="w-full" />
          <input name="info" placeholder={t("form.infoPlaceholder")} maxLength={255} className="w-full" />
          <input name="icon" placeholder={t("form.iconPlaceholder")} maxLength={255} className="w-full" />
          <input name="color" placeholder={t("form.colorPlaceholder")} maxLength={255} className="w-full" />
          <input name="costs" type="number" min={0} placeholder={t("form.costsPlaceholder")} required className="w-full" />
          <input name="credits" type="number" min={0} placeholder={t("form.creditsPlaceholder")} className="w-full" />
          <input name="duckets" type="number" min={0} placeholder={t("form.ducketsPlaceholder")} className="w-full" />
          <input name="diamonds" type="number" min={0} placeholder={t("form.diamondsPlaceholder")} className="w-full" />
          <input name="giveRank" type="number" min={0} placeholder={t("form.giveRankPlaceholder")} className="w-full" />
          <input name="badges" placeholder={t("form.badgesPlaceholder")} maxLength={255} className="w-full" />
          <input name="position" type="number" min={0} placeholder={t("form.positionPlaceholder")} defaultValue={0} className="w-full" />
        </div>
        <div className="mt-6 text-right">
          <button type="submit" className="btn btn-primary">
            {t("form.create")}
          </button>
        </div>
      </form>
    </main>
  );
}