import React, { useState } from 'react';
import { Task } from '../types/task';

interface NavigationControlsProps {
  currentDate: Date;
  onDateChange: (date: Date) => void;
  onViewChange: (view: 'day' | 'week') => void;
  view: 'day' | 'week';
}

const NavigationControls: React.FC<NavigationControlsProps> = ({ 
  currentDate, 
  onDateChange,
  onViewChange,
  view
}) => {
  const [currentWeek, setCurrentWeek] = useState<Date>(currentDate);

  const goToPreviousWeek = () => {
    const prevWeek = new Date(currentWeek);
    prevWeek.setDate(prevWeek.getDate() - 7);
    setCurrentWeek(prevWeek);
    onDateChange(prevWeek);
  };

  const goToNextWeek = () => {
    const nextWeek = new Date(currentWeek);
    nextWeek.setDate(nextWeek.getDate() + 7);
    setCurrentWeek(nextWeek);
    onDateChange(nextWeek);
  };

  const goToToday = () => {
    const today = new Date();
    setCurrentWeek(today);
    onDateChange(today);
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
  };

  return (
    <div className="flex flex-col md:flex-row justify-between items-center mb-6 p-4 bg-white rounded-lg shadow">
      <div className="flex items-center mb-4 md:mb-0">
        <button 
          className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded mr-2"
          onClick={goToPreviousWeek}
        >
          Previous
        </button>
        
        <button 
          className="px-4 py-2 bg-blue-100 hover:bg-blue-200 rounded mr-2"
          onClick={goToToday}
        >
          Today
        </button>
        
        <button 
          className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded"
          onClick={goToNextWeek}
        >
          Next
        </button>
      </div>
      
      <div className="text-xl font-bold mb-4 md:mb-0">
        {formatDate(currentWeek)}
      </div>
      
      <div className="flex items-center">
        <span className="mr-2 text-gray-700">View:</span>
        <div className="flex border border-gray-300 rounded overflow-hidden">
          <button
            className={`px-4 py-2 ${view === 'week' ? 'bg-blue-500 text-white' : 'bg-white hover:bg-gray-50'}`}
            onClick={() => onViewChange('week')}
          >
            Week
          </button>
          <button
            className={`px-4 py-2 ${view === 'day' ? 'bg-blue-500 text-white' : 'bg-white hover:bg-gray-50'}`}
            onClick={() => onViewChange('day')}
          >
            Day
          </button>
        </div>
      </div>
    </div>
  );
};

export default NavigationControls;