import React, { useState, useRef, useEffect } from "react";
import { FiCalendar } from "react-icons/fi";
import { MdKeyboardArrowDown } from "react-icons/md";

const RANGE_OPTIONS = [
  { label: 'Today', value: 'today' },
  { label: 'This Week', value: 'week' },
  { label: 'This Month', value: 'month' },
  { label: 'This Year', value: 'year' },
];

const CalendarDropdown = ({ value, onChange }) => {
  const [open, setOpen] = useState(false);
  const ref = useRef();

  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const selected = RANGE_OPTIONS.find(opt => opt.value === value) || RANGE_OPTIONS[0];

  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        className="calendar-btn"
        onClick={() => setOpen(o => !o)}
        type="button"
      >
        <FiCalendar style={{ marginRight: 4 }} />
        {selected.label}
        <MdKeyboardArrowDown style={{ marginLeft: 2 }} />
      </button>
      {open && (
        <div className="calendar-dropdown">
          {RANGE_OPTIONS.map(option => (
            <div
              key={option.value}
              className={`calendar-dropdown-item${selected.value === option.value ? ' selectedd' : ''}`}
              onClick={() => {
                onChange(option.value);
                setOpen(false);
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CalendarDropdown;