import { DirectorScaleButton } from '@/components/director-dashboard/DirectorScaleButton';
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) => (
        <DirectorScaleButton
          key={range}
          type="button"
          onClick={() => onTimeRangeChange(range)}
          className={`rounded-lg px-4 py-2 text-sm font-medium ${
            timeRange === range
              ? 'bg-purple-500 text-white shadow-sm'
              : 'bg-transparent text-gray-500'
          }`}
        >
          {range.charAt(0).toUpperCase() + range.slice(1)}
        </DirectorScaleButton>
      ))}
    </div>
  );
}
