import { ClipboardCheck, RefreshCw } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { ModuleHeader } from '@/components/ui/module-header';

interface WalkthroughCheckInHeaderProps {
  readonly loading: boolean;
  readonly onRefresh: () => Promise<void>;
}

export function WalkthroughCheckInHeader({
  loading,
  onRefresh,
}: WalkthroughCheckInHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <ModuleHeader
        title="Walk-Through Check-In"
        description="Quick, structured classroom observations - complete in under 4 minutes"
        icon={ClipboardCheck}
        iconClassName="bg-gradient-to-br from-indigo-500 to-violet-600"
        iconShadowClassName="shadow-indigo-500/30"
      />
      <Button
        type="button"
        variant="ghost"
        onClick={onRefresh}
        loading={loading}
        leadingIcon={<RefreshCw size={12} />}
        spinnerClassName="h-3 w-3"
        className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800/50 text-slate-400 rounded-xl text-xs font-medium hover:text-white transition-colors border border-slate-700/50"
      >
        Refresh
      </Button>
    </div>
  );
}
