import React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";

interface PeriodSelectorProps {
  selectedPeriod: string;
  onPrevPeriod: () => void;
  onNextPeriod: () => void;
}

const PeriodSelector: React.FC<PeriodSelectorProps> = ({
  selectedPeriod,
  onPrevPeriod,
  onNextPeriod,
}) => {
  const isMobile = useIsMobile();

  return (
    <div className="flex items-center justify-between mb-6 w-full">
      <button className="neuro-flat p-2 rounded-full" onClick={onPrevPeriod}>
        <ChevronLeft size={20} />
      </button>

      <div className="flex items-center">
        <span className="font-medium text-lg">{selectedPeriod}</span>
      </div>

      <button className="neuro-flat p-2 rounded-full" onClick={onNextPeriod}>
        <ChevronRight size={20} />
      </button>
    </div>
  );
};

export default PeriodSelector;