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;