'use client';

import { LogOut } from 'lucide-react';

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

interface UserFooterProps {
  label: string;
  sublabel?: string;
  onLogout: () => void;
  /** Sidebar recolhida/drawer fechado: só avatar + botão de sair, sem texto. */
  compact?: boolean;
}

/**
 * Rodapé de identidade + logout da sidebar/drawer (Etapa 14). O access
 * token (`lib/auth/jwt.ts`) não carrega nome/e-mail do usuário — só
 * `sub`/`tipo`/`tenant_id`/`role` — então a identificação aqui é o papel do
 * usuário, não o nome; ver observação da Etapa 14 no controle de progresso.
 */
export function UserFooter({ label, sublabel, onLogout, compact = false }: UserFooterProps) {
  const initial = label.charAt(0).toUpperCase();

  return (
    <div className={cn('flex w-full items-center gap-2', compact && 'w-auto flex-col')}>
      <span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-foreground">
        {initial}
      </span>
      {!compact && (
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-medium text-foreground">{label}</p>
          {sublabel && <p className="truncate text-xs text-neutral-500">{sublabel}</p>}
        </div>
      )}
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        onClick={onLogout}
        aria-label="Sair"
        title="Sair"
      >
        <LogOut className="size-4" />
      </Button>
    </div>
  );
}