import React from "react";
import { Icon } from "@iconify/react";
import { MiniCalendar } from "../calendar/MiniCalendar";
import { SearchBar } from "../search/SearchBar";
import { TagsFilter } from "../search/TagsFilter";
import { useAppSelector } from "../../store/hooks";

interface MobileSidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

export const MobileSidebar: React.FC<MobileSidebarProps> = ({
  isOpen,
  onClose,
}) => {
  const allNotes = useAppSelector((state) => state.notes.allNotes);

  return (
    <>
      {/* Оверлей */}
      <div
        className={`mobile-sidebar-overlay ${isOpen ? "open" : ""}`}
        onClick={onClose}
      />

      {/* Сайдбар */}
      <div className={`mobile-sidebar ${isOpen ? "open" : ""}`}>
        <button className="sidebar-close-btn" onClick={onClose}>
          <Icon icon="mdi:close" />
        </button>
        <div className="sidebar-content">
          <div className="mobile-calendar-section">
            <MiniCalendar notes={allNotes} />
          </div>

          <div className="mobile-search-section">
            <SearchBar />
          </div>

          <div className="mobile-tags-section">
            <TagsFilter notes={allNotes} />
          </div>
        </div>
      </div>
    </>
  );
};