"use client";

import { BaseModal } from "@/components/modal";
import DynamicButton from "@/components/button";
import { useTranslations } from "next-intl";

interface AuctionSettingsModalProps {
  open: boolean;
  onClose: () => void;
  auctionId?: number;
}

export default function AuctionSettingsModal({
  open,
  onClose,
  auctionId,
}: AuctionSettingsModalProps) {
  const t = useTranslations("DASHBOARD.AUCTION_MODAL");

  return (
    <BaseModal
      isOpen={open}
      onOpenChange={(open) => !open && onClose()}
      title={t("title")}
      placement="center"
      contentClassName="w-full max-w-[420px] rounded-xl text-primary"
    >
      <div className="flex flex-col gap-4 py-2">
        <p className="text-sm text-gray-600 text-center">
          {t.rich("description", {
            id: () => <strong>{auctionId}</strong>,
          })}
        </p>

        <div className="flex flex-col gap-3">
          <DynamicButton
            fullWidth
            className="bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg"
            onClick={() => alert(t("market_alert"))}
          >
            {t("enter_market")}
          </DynamicButton>

          <DynamicButton
            fullWidth
            className="bg-amber-500 hover:bg-amber-600 text-white py-2 rounded-lg"
            onClick={() => alert(t("delay_alert"))}
          >
            {t("delay_auction")}
          </DynamicButton>

          <DynamicButton
            fullWidth
            className="bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg"
            onClick={() => {
              if (confirm(t("confirm_delete"))) {
                alert(t("delete_alert"));
                onClose();
              }
            }}
          >
            {t("delete_auction")}
          </DynamicButton>
        </div>
      </div>
    </BaseModal>
  );
}