'use client';
import { AnimatePresence, motion } from 'framer-motion';
import useSidebarStore from '@/shared/store/sidebarStore';
import React from 'react';
import { X } from 'lucide-react';
import SidebarContent from './SidebarContent';

const overlayVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
  exit: { opacity: 0 },
};

const Sidebar: React.FC = () => {
  const { isOpen, closeSidebar } = useSidebarStore();

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="lg:hidden">
          <motion.div
            key="overlay"
            initial="hidden"
            animate="visible"
            exit="exit"
            variants={overlayVariants}
            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-xs"
            onClick={closeSidebar}
          />
          <motion.aside
            key="sidebar"
            initial="hidden"
            animate="visible"
            exit="exit"
            variants={{
              hidden: { x: '-100%' }, // butunlay chapda
              visible: { x: 0, transition: { type: 'tween', delay: 0.15 } }, // overlaydan keyin
              exit: { x: '-100%', transition: { type: 'tween' } },
            }}
            className="fixed top-0 bottom-0 left-0 z-50 w-[270px] bg-accent text-white shadow-lg max-h-[100vh] overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar]:pr-1 [&::-webkit-scrollbar-thumb]:bg-primary"
          >
            <div className="p-3">
              <div className="flex justify-end items-start">
                <div
                  onClick={closeSidebar}
                  className="cursor-pointer hover:text-primary duration-300"
                >
                  <X size={'18px'} strokeWidth={3} />
                </div>
              </div>
              <SidebarContent />
            </div>
          </motion.aside>
        </div>
      )}
    </AnimatePresence>
  );
};

export default Sidebar;
