import { useState } from "react";
import { CgAddR } from "react-icons/cg";
import { PiCoffee } from "react-icons/pi";
import { FaRegEdit } from "react-icons/fa";
import CoffeeCard from "./Component/CoffeeCard";
import coffee12 from "../../assets/image/coffee12.png";

const DEFAULT_CATEGORIES = [
  "نوشیدنی سرد",
  "نوشیدنی گرم",
  "کیک و دسر",
  "صبحانه",
  "ساندویچ و برگر",
  "سالاد و پیش غذا",
];
const PRODUCTS = [
  {
    id: 1,
    title: "اسپرسو",
    description: "قهوه 100٪ عربیکا با عطر بالا",
    price: "118,000",
    image: coffee12,
  },
  {
    id: 2,
    title: "لاته",
    description: "شیر بخار داده شده + اسپرسو",
    price: "135,000",
    image: coffee12,
  },
  {
    id: 3,
    title: "کاپوچینو",
    description: "کلاسیک ایتالیایی با فوم شیر",
    price: "142,000",
    image: coffee12,
  },
];

export default function EditCafeMenu({ setEditMenu }) {
  const [selectedCategory, setSelectedCategory] = useState(null);

  return (
    <div>
      <h1 className="text-bold text-2xl text-text1">ادیت منو کافه</h1>

      <div className="flex gap-3 justify-end mb-6">
        <button
          onClick={() => setEditMenu(false)}
          className="px-4 md:px-6 py-2 border-2 border-[#bb8f70] text-[#402e32] rounded-3xl
                     hover:bg-button1 hover:text-white hover:border-button1
                     transition-all duration-300 text-sm md:text-base font-medium"
        >
          انصراف
        </button>

        <button
          className="px-4 md:px-6 py-2 bg-button1 text-white rounded-3xl
                           hover:bg-[#5f494f] transition-all duration-300
                           text-sm md:text-base font-medium"
        >
          تایید
        </button>
      </div>

      <div className="flex mt-10 border-b-2 border-border pb-2 relative">
        <div className="flex items-center gap-1 text-text1">
          <CgAddR />
          <p>عنوان</p>
        </div>

        <div className="flex mr-6 gap-4 relative">
          {DEFAULT_CATEGORIES.map((cat, index) => (
            <button
              key={index}
              onClick={() => setSelectedCategory(cat)}
              className={`relative -bottom-[2px] pb-2 text-sm md:text-base transition-all
          ${
            selectedCategory === cat
              ? "text-text1 font-bold"
              : "text-gray-400 hover:text-text1"
          }`}
            >
              {cat}

              {selectedCategory === cat && (
                <span
                  className="absolute left-0 -bottom-[9px] w-full h-[5px]
                       bg-border rounded-full transition-all duration-300"
                />
              )}
            </button>
          ))}
        </div>
      </div>
      {/* جزئیات category انتخاب شده */}
      {selectedCategory && (
        <>
          <div className="flex mt-8 gap-1 font-bold items-center text-center text-text1">
            <CgAddR />
            افزودن زیر عنوان
          </div>
          <div className="flex font-bold items-center text-center gap-2 mt-4">
            <FaRegEdit size={30} />
            <PiCoffee size={30} />
            <p className="border-b-2 border-border">قهوه ها</p>
          </div>
          <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {PRODUCTS.map((item) => (
              <CoffeeCard
                key={item.id}
                title={item.title}
                description={item.description}
                price={item.price}
                image={item.image}
                onEdit={() => console.log("edit", item.id)}
              />
            ))}
          </section>
        </>
      )}
    </div>
  );
}
