import React from "react";
import { BiEdit } from "react-icons/bi";
import Search from "../../assets/icons/search.svg";
import Arrow from "../../assets/icons/arrow.svg";
import Vector7 from "../../assets/icons/Vector7.svg";
import Vector8 from "../../assets/icons/Vector8.svg";
import Vector9 from "../../assets/icons/Vector9.svg";
import Star1 from "../../assets/icons/Star1.svg";
import Group from "../../assets/icons/Group.svg";
import Pic from "../../assets/icons/pic.png";
import Pic1 from "../../assets/icons/pic1.svg";
import { Link } from "react-router-dom";

const cafes = [
  {
    id: 1,
    name: "کافه ترنج",
    location: "اصفهان - خیابان آذر",
    rating: 3.7,
    category: "دسته بندی",
    logo: Pic1,
  },
  {
    id: 2,
    name: "کافه سیب",
    location: "تهران - خیابان ولیعصر",
    rating: 4.2,
    category: "کافه سنتی",
    logo: Pic1,
  },
  {
    id: 3,
    name: "کافه داون‌تاون",
    location: "شیراز - خیابان زند",
    rating: 4.0,
    category: "کافه فرهنگی",
    logo: Pic1,
  },
];

const Management1 = () => {
  return (
    <section dir="rtl" className="-mt-12">
      {/* ===== Header ===== */}
      {/* <header className="flex items-center gap-4">
        <h3 className="text-[#402E32] w-[90%] font-bold">مدیریت کافه</h3>

        <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
          <img src={Search} alt="لوگو" />
        </div>

        <div className="w-45 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
          <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
          <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
          <img src={Arrow} alt="لوگو" />
        </div>

        <img src={Vector7} alt="لوگو" />
      </header> */}

      {/* ===== Add Button ===== */}
      <div className="flex items-center justify-between">
        <button className="w-45 h-12 bg-[#7F4629] text-white mt-8 rounded-3xl flex items-center justify-center gap-3 hover:bg-amber-950 transition-all cursor-pointer">
          <p className="-mt-0.5">افزودن شعبه جدید</p>
          <img src={Vector9} alt="لوگو" />
        </button>
        <img className="mt-8 ml-4" src={Vector8} alt="لوگو" />
      </div>

      {/* ===== Title ===== */}
      <h3 className="text-[#402E32] w-[90%] font-bold mt-10">کافه های شما</h3>

      {/* ===== Table Header ===== */}
      <div className="mt-28 grid grid-cols-6 gap-x-42 bg-[#EFEEEE] px-4 py-3 rounded-xl text-[#402E32] font-medium">
        <h3>لوگو</h3>
        <h3>اسم</h3>
        <h3>لوکیشن</h3>
        <h3>ریتینگ</h3>
        <h3>دسته</h3>
        <h3>ادیت</h3>
      </div>

      {/* ===== Table Rows ===== */}
      <div className="grid grid-cols-6 gap-y-9 gap-x-33 mt-10 text-[#402E32] font-medium pl-4">
        {cafes.map((cafe) => (
          <React.Fragment key={cafe.id}>
            <img src={cafe.logo} className="w-10 h-10" alt="لوگو" />
            <h3 className="whitespace-nowrap -mr-2">{cafe.name}</h3>
            <h3 className="whitespace-nowrap -mr-7">{cafe.location}</h3>

            <div className="flex gap-1 mr-5">
              <img className="w-6 h-6" src={Star1} alt="ستاره" />
              <h3>{cafe.rating}</h3>
            </div>

            <div className="flex gap-1 whitespace-nowrap">
              <img className="w-5 h-5" src={Group} alt="لوگو" />
              <h3 className="-mt-1">{cafe.category}</h3>
            </div>

            {/* ===== دکمه ادیت ===== */}
            <Link
              to={`/edit-cafe/${cafe.id}`}
              className="flex justify-center whitespace-nowrap gap-2 border-2 border-[#BB8F70] px-10 py-3 rounded-3xl font-light -mt-1.5 -mx-4 hover:bg-[#7F4629] hover:text-white hover:border-none cursor-pointer transition-all duration-500"
            >
              <h3>ادیت کافه</h3>
              <BiEdit className="w-4.5 h-4.5 mt-1.5" />
            </Link>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

export default Management1;

// const Management1 = () => {
//   return (
//     <section dir="rtl" className="">
//       <header className="flex items-center gap-4">
//         <h3 className="text-[#402E32] w-[90%] font-bold">مدیریت کافه</h3>
//         <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//           <img className="" src={Search} alt="لوگو" />
//         </div>

//         <div className="w-35 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//           <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
//           <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
//           <img className="" src={Arrow} alt="لوگو" />
//         </div>
//         <img src={Vector7} />
//       </header>

//       <div className="flex items-center justify-between">
//         <button className="w-45 h-10 bg-[#7F4629] text-white mt-8 rounded-3xl flex items-center justify-center gap-3 hover:bg-amber-950 transition-all cursor-pointer">
//           <p className="-mt-1.5">افزودن شعبه جدید</p>
//           <img className="" src={Vector9} alt="لوگو" />
//         </button>
//         <img className="mt-8" src={Vector8} alt="لوگو" />
//       </div>

//       <h3 className="text-[#402E32] w-[90%] font-bold mt-10">کافه های شما</h3>

//       <div className=" mt-32 grid grid-cols-6 gap-x-42 bg-[#EFEEEE] px-4 py-3 rounded-xl text-[#402E32] font-medium ">
//         <h3>لوگو</h3>
//         <h3>اسم</h3>
//         <h3>لوکیشن</h3>
//         <h3>ریتینگ</h3>
//         <h3>دسته</h3>
//         <h3 className="">ادیت</h3>
//       </div>

//       <div className="grid grid-cols-6 grid-rows-4 gap-y-9 gap-x-33 mt-10 text-[#402E32] font-medium pl-4">
//         <img src={Pic1} className="w-10 h-10" />
//         <h3 className="whitespace-nowrap -mr-2">کافه ترنج</h3>
//         <h3 className="whitespace-nowrap -mr-7">اصفهان - خیابان آذر </h3>
//         <div className="flex gap-1 mr-5">
//           <img className="w-6 h-6" src={Star1} />
//           <h3>3.7</h3>
//         </div>
//         <div className="flex gap-1 whitespace-nowrap">
//           <img className="w-5 h-5" src={Group} alt="لوگو" />
//           <h3 className="-mt-1">دسته بندی</h3>
//         </div>
//         <div className="flex justify-center whitespace-nowrap gap-1 border-2 border-[#BB8F70] px-7 py-2 rounded-3xl font-light -mt-1.5 -mx-4 hover:bg-[#7F4629] hover:text-white hover:border-none cursor-pointer duration-600">
//           <h3>ادیت کافه</h3>
//           {/* <img className="w-3 h-3 mt-2" src={Vector10} alt="لوگو" /> */}
//           <BiEdit className="w-3.5 h-3.5 mt-2" />
//         </div>
//         <img src={Pic1} className="w-10 h-10" />
//         <h3 className="whitespace-nowrap -mr-2">کافه ترنج</h3>
//         <h3 className="whitespace-nowrap -mr-7">اصفهان - خیابان آذر </h3>
//         <div className="flex gap-1 mr-5">
//           <img className="w-6 h-6" src={Star1} />
//           <h3>3.7</h3>
//         </div>
//         <div className="flex gap-1 whitespace-nowrap">
//           <img className="w-5 h-5" src={Group} alt="لوگو" />
//           <h3 className="-mt-1">دسته بندی</h3>
//         </div>
//         <div className="flex justify-center whitespace-nowrap gap-1 border-2 border-[#BB8F70] px-7 py-2 rounded-3xl font-light -mt-1.5 -mx-4 hover:bg-[#7F4629] hover:text-white hover:border-none cursor-pointer duration-600">
//           <h3>ادیت کافه</h3>
//           {/* <img className="w-3 h-3 mt-2" src={Vector10} alt="لوگو" /> */}
//           <BiEdit className="w-3.5 h-3.5 mt-2" />
//         </div>
//         <img src={Pic1} className="w-10 h-10" />
//         <h3 className="whitespace-nowrap -mr-2">کافه ترنج</h3>
//         <h3 className="whitespace-nowrap -mr-7">اصفهان - خیابان آذر </h3>
//         <div className="flex gap-1 mr-5">
//           <img className="w-6 h-6" src={Star1} alt="لوگو" />
//           <h3>3.7</h3>
//         </div>
//         <div className="flex gap-1 whitespace-nowrap">
//           <img className="w-5 h-5" src={Group} alt="لوگو" />

//           <h3 className="-mt-1">دسته بندی</h3>
//         </div>
//         <div className="flex justify-center whitespace-nowrap gap-1 border-2 border-[#BB8F70] px-5 py-2 rounded-3xl font-light -mt-1.5 -mx-4 hover:bg-[#7F4629] hover:text-white hover:border-none cursor-pointer transition-all duration-600">
//           <h3>ادیت کافه</h3>
//           {/* <img className="w-3 h-3 mt-2" src={Vector10} alt="لوگو" /> */}
//           <BiEdit className="w-3.5 h-3.5 mt-2" />
//         </div>
//       </div>
//     </section>
//   );
// };

// export default Management1;