"use client";
import React from "react";
import { currency } from "@/lib/utils";

const CategoryCard = ({ image, title, count }: any) => (
  <div className="max-w-md mx-auto pt-6">
    <div className="border border-primary/30 rounded-xl p-4 pt-8 flex flex-col items-center relative">
      {/* Sun icon at top */}
      <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-white px-3">
        <div className="h-8 w-8 bg-primary rounded-full flex items-center justify-center">
          <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 24 24"
          >
            <path d="M12 17l-1.82-1.82a.5.5 0 0 1 0-.71l.71-.7a.5.5 0 0 1 .7 0L12 14.18l.4-.41a.5.5 0 0 1 .71 0l.7.7a.5.5 0 0 1 0 .72L12 17z" />
            <path d="M12 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1zm0 16a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zM2 12a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm16 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zM5.3 5.3a1 1 0 0 1 1.4 0l1.4 1.4a1 1 0 0 1-1.4 1.4L5.3 6.7a1 1 0 0 1 0-1.4zm11 11a1 1 0 0 1 1.4 0l1.4 1.4a1 1 0 0 1-1.4 1.4l-1.4-1.4a1 1 0 0 1 0-1.4zM5.3 18.7a1 1 0 0 1 0-1.4l1.4-1.4a1 1 0 0 1 1.4 1.4l-1.4 1.4a1 1 0 0 1-1.4 0zM16.7 7.3a1 1 0 0 1 0-1.4l1.4-1.4a1 1 0 0 1 1.4 1.4l-1.4 1.4a1 1 0 0 1-1.4 0z" />
          </svg>
        </div>
      </div>

      {/* Promotional text */}
      <div className="mt-4 text-center">
        <h2 className="text-2xl font-bold text-gray-800">Flat 30 % off</h2>
        <p className="text-gray-600 mt-1">
          Use code <span className="font-medium">ONLY4U</span> | above {currency}159
        </p>
      </div>
    </div>
  </div>
);

const RestroCat = ({ category, setSelectedCat, selectedCat }: any) => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg shadow-sm hover:bg-gray-800 transition-colors"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="currentColor" />
        </svg>
        <span className="text-sm font-medium">Menu</span>
        <span className="text-xs">▼</span>
      </button>

      {isOpen && (
        <>
          <div
            className="fixed inset-0 z-40"
            onClick={() => setIsOpen(false)}
          ></div>
          <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 z-50 overflow-hidden max-sm:left-0 max-sm:right-auto">
            <div className="max-h-[400px] overflow-y-auto py-2">
              {/* All Category */}
              {category?.length > 1 && (
                <button
                  className={`w-full text-left px-4 py-3 flex justify-between items-center hover:bg-gray-50 transition-colors ${selectedCat === "all" ? "text-primary font-medium bg-brand-50" : "text-gray-700"
                    }`}
                  onClick={() => {
                    setSelectedCat("all");
                    setIsOpen(false);
                  }}
                >
                  <span>All</span>
                  <span className="text-xs text-gray-400">{category.reduce((acc: number, cat: any) => acc + (cat.food_items?.length || 0), 0)}</span>
                </button>
              )}

              {/* Other Categories */}
              {category?.map((item: any) => (
                <button
                  key={item.category_name}
                  className={`w-full text-left px-4 py-3 flex justify-between items-center hover:bg-gray-50 transition-colors ${selectedCat?.category_name === item.category_name
                    ? "text-primary font-medium bg-brand-50"
                    : "text-gray-700"
                    }`}
                  onClick={() => {
                    setSelectedCat(item);
                    setIsOpen(false);
                  }}
                >
                  <span>{item.category_name}</span>
                  <span className="text-xs text-gray-400">{item.food_items?.length || 0}</span>
                </button>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
};



export default RestroCat;