import { BarChart3, Database } from 'lucide-react';

import { ModuleHeader } from '@/components/ui/module-header';
import type { DirectorDashboardTimeRange } from '@/shared/constants/directorDashboard';
import { DirectorTimeRangeTabs } from '@/components/director-dashboard/DirectorTimeRangeTabs';

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

export function DirectorDashboardHeader({
  timeRange,
  onTimeRangeChange,
}: DirectorDashboardHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <ModuleHeader
        title="Director Dashboard"
        icon={BarChart3}
        iconClassName="bg-gradient-to-br from-purple-500 to-purple-700"
        titleClassName="text-gray-800"
        descriptionClassName="text-gray-500 flex items-center gap-2"
        description={(
          <>
            Campus oversight, compliance tracking, and risk management
            <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-lg text-[10px] font-semibold">
              <Database size={10} />
              Live Database
            </span>
          </>
        )}
      />
      <DirectorTimeRangeTabs
        timeRange={timeRange}
        onTimeRangeChange={onTimeRangeChange}
      />
    </div>
  );
}
