components/CategorySidebar.jsx

import React from 'react';
import { 
  Grid, 
  Sandwich, 
  Coffee, 
  Pizza, 
  IceCream, 
  Salad, 
  Dessert, 
  Juice,
  MoreHorizontal
} from 'lucide-react';

const CategorySidebar = ({ 
  activeCategory, 
  onCategorySelect, 
  isOpen,
  onClose
}) => {
  const categories = [
    { id: 'all', name: 'ทั้งหมด', icon: Grid },
    { id: 'food', name: 'อาหาร', icon: Sandwich },
    { id: 'drink', name: 'เครื่องดื่ม', icon: Coffee },
    { id: 'fastfood', name: 'ฟาสต์ฟู้ด', icon: Pizza },
    { id: 'dessert', name: 'ของหวาน', icon: Dessert },
    { id: 'healthy', name: 'สุขภาพ', icon: Salad },
    { id: 'icecream', name: 'ไอศกรีม', icon: IceCream },
    { id: 'juice', name: 'น้ำผลไม้', icon: Juice },
  ];

  return (
    <>
      {/* Overlay for mobile */}
      {isOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-40 md:hidden"
          onClick={onClose}
        />
      )}
      
      <aside 
        className={`
          fixed md:static left-0 top-0 h-full bg-white border-r border-pos-border
          w-64 transform transition-transform duration-300 ease-in-out z-50
          ${isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
        `}
      >
        <div className="flex flex-col h-full">
          <div className="p-4 border-b border-pos-border flex justify-between items-center">
            <h2 className="text-lg font-bold text-pos-text">หมวดหมู่สินค้า</h2>
            <button onClick={onClose} className="md:hidden p-2 hover:bg-pos-bg rounded-lg">
              <MoreHorizontal className="w-5 h-5 text-pos-text-secondary" />
            </button>
          </div>
          
          <div className="flex-1 overflow-y-auto p-2">
            <div className="space-y-1">
              {categories.map((category) => {
                const Icon = category.icon;
                const isActive = activeCategory === category.id;
                
                return (
                  <button
                    key={category.id}
                    onClick={() => {
                      onCategorySelect(category.id);
                      if (window.innerWidth < 768) onClose();

                    className={`
                      w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
                      ${isActive 
                        ? 'bg-primary-600 text-white shadow-lg shadow-primary-200' 
                        : 'hover:bg-pos-bg text-pos-text'
                      }
                    `}
                  >
                    <Icon className={`w-5 h-5 ${isActive ? 'text-white' : 'text-pos-text-secondary'}`} />
                    <span className="font-medium">{category.name}</span>
                  </button>
                );
              })}
            </div>
            
            <div className="mt-6 px-4">
              <div className="bg-primary-50 p-4 rounded-xl">
                <h3 className="text-sm font-semibold text-primary-800 mb-2">โปรโมชั่นพิเศษ</h3>
                <p className="text-xs text-primary-600 mb-3">ซื้อ 2 ชิ้ง ลด 10%</p>
                <div className="w-full bg-primary-200 rounded-full h-1.5 mb-2">
                  <div className="bg-primary-600 rounded-full h-1.5 w-3/4"></div>
                </div>
                <p className="text-xs text-primary-600">90% ของสินค้ามีส่วนลด</p>
              </div>
            </div>
          </div>
          
          <div className="p-4 border-t border-pos-border">
            <button className="w-full py-3 rounded-xl border border-primary-600 text-primary-600 font-medium hover:bg-primary-50 transition-colors">
              จัดการหมวดหมู่
            </button>
          </div>
        </div>
      </aside>
    </>
  );
};

export default CategorySidebar;