import { Button } from '@/components/ui/button';
import {
  DIRECTOR_DASHBOARD_TIME_RANGES,
  type DirectorDashboardTimeRange,
} from '@/shared/constants/directorDashboard';

interface DirectorTimeRangeTabsProps {
  readonly timeRange: DirectorDashboardTimeRange;
  readonly onTimeRangeChange: (timeRange: DirectorDashboardTimeRange) => void;
}

export function DirectorTimeRangeTabs({
  timeRange,
  onTimeRangeChange,
}: DirectorTimeRangeTabsProps) {
  return (
    <div className="flex gap-2 bg-white rounded-xl border border-violet-100 p-1">
      {DIRECTOR_DASHBOARD_TIME_RANGES.map((range) => (
        <Button
          key={range}
          type="button"
          onClick={() => onTimeRangeChange(range)}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            timeRange === range
              ? 'bg-purple-500 text-white shadow-sm'
              : 'bg-transparent text-gray-500 hover:text-gray-700 hover:bg-transparent'
          }`}
        >
          {range.charAt(0).toUpperCase() + range.slice(1)}
        </Button>
      ))}
    </div>
  );
}
