'use client';

import { useRouter } from 'next/navigation';
import { LogOut } from 'lucide-react';

import { Button } from '@/components/ui/button';

interface PortalHeaderProps {
  portName: string;
  portLogoUrl?: string | null;
  clientName: string;
}

export function PortalHeader({ portName, portLogoUrl, clientName }: PortalHeaderProps) {
  const router = useRouter();

  async function handleLogout() {
    await fetch('/api/portal/auth/logout', { method: 'POST' });
    router.push('/portal/login');
  }

  return (
    <header className="border-b bg-white sticky top-0 z-10">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between">
        <div className="flex items-center gap-3">
          {portLogoUrl ? (
            <img
              src={portLogoUrl}
              alt={portName}
              className="h-8 w-auto object-contain"
            />
          ) : (
            <div className="h-8 w-8 rounded bg-[#1e2844] flex items-center justify-center">
              <span className="text-white text-xs font-bold">
                {portName.charAt(0).toUpperCase()}
              </span>
            </div>
          )}
          <div>
            <p className="text-sm font-semibold text-gray-900">{portName}</p>
            <p className="text-xs text-gray-500">Client Portal</p>
          </div>
        </div>
        <div className="flex items-center gap-4">
          <span className="text-sm text-gray-600 hidden sm:block">{clientName}</span>
          <Button
            variant="ghost"
            size="sm"
            onClick={handleLogout}
            className="text-gray-500 hover:text-gray-900"
          >
            <LogOut className="h-4 w-4 mr-1" />
            <span className="hidden sm:inline">Sign out</span>
          </Button>
        </div>
      </div>
    </header>
  );
}