import React from 'react';
import { CalendarDays, Calendar, CalendarRange, List } from 'lucide-react';

const ToggleView = ({ viewType, setViewType }) => {
  const views = [
    { type: 'week', label: 'Semaine', icon: CalendarDays },
    { type: 'month', label: 'Mois', icon: Calendar },
    { type: 'year', label: 'Année', icon: CalendarRange },
    { type: 'planning', label: 'Planning', icon: List },
  ];

  return (
    <div className="bg-gray-100 p-1 rounded-lg flex gap-1">
      {views.map(({ type, label, icon: Icon }) => (
        <button
          key={type}
          onClick={() => setViewType(type)}
          className={`
            flex items-center gap-2 px-3 py-1.5 rounded-md transition-all
            ${
              viewType === type
                ? 'bg-emerald-600 text-white shadow-sm'
                : 'text-gray-600 hover:bg-gray-200'
            }
          `}
        >
          <Icon className="w-4 h-4" />
          <span className="text-sm font-medium">{label}</span>
        </button>
      ))}
    </div>
  );
};

export default ToggleView;