'use client';

import { Spin } from "antd";
import { useEffect, useState } from "react";

export default function StockCount({ inventoryid }) {
  const [stock, setStock] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!inventoryid) return;

    const fetchStock = async () => {
      try {
        setLoading(true);

        const res = await fetch(
          `/api/inventory?inventory_id=${inventoryid}`
        );

        const json = await res.json();

        if (json?.success) {
          setStock(Number(json.inventory?.stock || 0));
        }
      } catch (err) {
        console.error("Stock fetch failed", err);
      } finally {
        setLoading(false);
      }
    };

    fetchStock();
  }, [inventoryid]);

  if (loading) return <Spin size="small" />;

  if (stock === null) return "—";

  return (
    <div
    className="flex justify-between items-center w-full bg-white dark:bg-black rounded-md pl-[30px] pr-[24px] py-5 border border-gray-200"
     
    >
      <span style={{ fontSize: 14, color: "#666" }}>
        Available Stock
      </span>

      <span
        style={{
          fontSize: 22,
          fontWeight: 600,
          color: stock > 0 ? "#000" : "#ff4d4f",
        }}
      >
        {stock}
      </span>
    </div>
  );
}