"use client";
import { useState } from "react";
import { BaseModal } from "@/components/modal";
import { useTranslations } from "next-intl";
export default function BuyPaddleModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const t = useTranslations("ANNUAL_AUCTIONS_SHARING");
  const [price, setPrice] = useState(1000);
  const [lot, setLot] = useState("");

  return (
    <BaseModal
      isOpen={open}
      onOpenChange={(isOpen) => {
        if (!isOpen) onClose();
      }}
      title={t("manage_paddles.modal_title")}
      contentClassName="w-full max-w-[400px] rounded-xl"
      footer={
        <div className="flex justify-end gap-2">
          <button
            onClick={() => {
              alert(t("manage_paddles.purchase_alert"));
              onClose();
            }}
            className="px-4 py-2 bg-green-700 text-white rounded-lg"
          >
            {t("manage_paddles.purchase_button")}
          </button>
        </div>
      }
    >
      <div className="space-y-4">
        <div>
          <label className="text-sm text-slate-600">
            {t("manage_paddles.paddle_value_label")}
          </label>
          <input
            type="number"
            value={price}
            onChange={(e) => setPrice(Number(e.target.value))}
            className="w-full mt-1 px-3 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">
            {t("manage_paddles.link_lot_label")}
          </label>
          <input
            value={lot}
            onChange={(e) => setLot(e.target.value)}
            className="w-full mt-1 px-3 py-2 border rounded-lg"
            placeholder={t("manage_paddles.link_lot_placeholder")}
          />
        </div>
      </div>
    </BaseModal>
  );
}