import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import dataImage3 from "../../assets/images/data-table-user-3.png";
import dataImage4 from "../../assets/images/data-table-user-4.png";
import SelectBox from "../Helpers/SelectBox";
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function CalendarTable({ className }) {
  const filterCategories = ["All Categories", "Explore", "Featured"];
  const [selectedCategory, setCategory] = useState(filterCategories[0]);
  const [value, onChange] = useState(new Date());

  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[800px] ${
        className || ""
      }`}
    >
      <div className="header w-full flex justify-between items-center mb-5">
        <div className="flex space-x-2 items-center">
          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
            Calendar
          </h1>
        </div>
        <SelectBox
          action={setCategory}
          datas={filterCategories}
          className="Update-table-dropdown"
          contentBodyClasses="w-auto min-w-max"
        />
      </div>


      <div>
      <Calendar onChange={onChange} value={value} calendarType="US" />
    </div>



    </div>
  );
}