import React, { useState } from "react";
import { BsThreeDotsVertical } from "react-icons/bs";

const defaultOpcoes = [
  { value: "todos", label: "Todos" },
  { value: "dia", label: "Dia" },
  { value: "semana", label: "Semana" },
  { value: "mes", label: "Mês" },
];

interface OpcaoPeriodo {
  value: string;
  label: string;
}
interface PeriodoFiltroProps {
  periodoSelecionado: string;
  onChange: (periodo: string) => void;
  opcoes?: OpcaoPeriodo[];
}
const PeriodoFiltro: React.FC<PeriodoFiltroProps> = ({
  periodoSelecionado,
  onChange,
  opcoes = defaultOpcoes,
}) => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const handleSelect = (periodo: string) => {
    onChange(periodo);
    setDropdownVisible(false);
  };

  return (
    <div className="flex justify-between items-center">
      <div className="flex w-full max-w-50 justify-end">
        {/* Botão Dropdown Mobile */}
        <button
          className="rounded-full md:hidden py-2 px-4 text-sm font-medium text-black bg-white dark:bg-black dark:text-white hover:bg-white hover:shadow-card"
          onClick={() => setDropdownVisible(!dropdownVisible)}
        >
          <BsThreeDotsVertical />
        </button>

        {/* Dropdown Menu */}
        {dropdownVisible && (
          <ul className="absolute z-1 right-0 mt-2 w-48 bg-white border border-gray-200 dark:bg-boxdark rounded-md shadow-lg">
            {opcoes.map(({ value, label }) => (
              <li
                key={value}
                className="py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                onClick={() => handleSelect(value)}
              >
                {label}
              </li>
            ))}
          </ul>
        )}

        {/* Botões Desktop */}
        <div className="hidden md:inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
          {opcoes.map(({ value, label }) => (
            <button
              key={value}
              className={`rounded py-1 px-3 text-xs font-medium text-black dark:text-white ${
                periodoSelecionado === value
                  ? "bg-white shadow-card dark:bg-black"
                  : "hover:bg-white hover:shadow-card dark:hover:bg-boxdark"
              }`}
              onClick={() => handleSelect(value)}
            >
              {label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PeriodoFiltro;