import { useState } from "react";
import Arrow from "../components/Arrow";

export default function CardItem({ item, onAddToCart }) {
  // Начальный вес — 100 грамм (0.100 кг)
  const [weight, setWeight] = useState(0.1);

  // Увеличение веса с шагом 100 грамм
  const handleIncrement = () => {
    setWeight((prev) => parseFloat((prev + 0.1).toFixed(3)));
  };

  // Уменьшение веса (не позволяет опуститься ниже минимальных 100 грамм)
  const handleDecrement = () => {
    setWeight((prev) =>
      prev > 0.1 ? parseFloat((prev - 0.1).toFixed(3)) : 0.1,
    );
  };

  return (
    <div className="flex flex-col text-white w-full">
      <div className="w-full rounded-md overflow-hidden bg-slate-800/60 flex flex-col h-100 items-center justify-center border border-slate-700/50 select-none">
        <img src={item.avatar_url} alt={item.name} className="object-cover" />
      </div>

      {/* Блок с информацией о товаре */}
      <div className="mt-8 flex justify-between items-start grow">
        <div className="font-bold text-xl">{item.name}</div>
        <div className="text-right">
          <span className="font-medium text-lg">
            {Number(item.price || 0).toLocaleString("ru-RU")} ₽
          </span>
          <span className="text-white text-xl"> / {item.unit || "кг"}</span>
        </div>
      </div>
      <div className="mt-8 lg:mt-2 items-start ">
        <span className="text-white text-lg font-medium lg:font-light">
          {item.city || "Архангельск"}
        </span>
      </div>

      <div className="mt-9 flex items-center justify-between gap-4">
        {/* Шаговый переключатель веса */}
        <div className="flex items-center bg-gold rounded-md px-2 py-2 text-white">
          <button
            onClick={handleIncrement}
            className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
          >
            +
          </button>
          <span className="mx-2 font-mono text-sm min-w-12.5 text-center">
            {weight.toFixed(3)}
          </span>
          <button
            onClick={handleDecrement}
            className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
          >
            -
          </button>
        </div>

        {/* Кнопка действия "В корзину" */}
        <button
          onClick={() => onAddToCart(item, weight)}
          className="group flex items-center gap-4.5 text-base font-bold text-white cursor-pointer"
        >
          <span>В корзину</span>
          <Arrow />
        </button>
      </div>
    </div>
  );
}