import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { cn } from '@/lib/utils'

interface ChatUserProfileProps {
  collapsed?: boolean
  className?: string
}

export function ChatUserProfile({ collapsed = false, className }: ChatUserProfileProps) {
  return (
    <div className={cn('p-3 border-t border-border/40 flex items-center justify-between bg-card/40', className)}>
      <div className="flex items-center gap-2.5 overflow-hidden">
        <Avatar className="w-8 h-8 border border-border/80 shrink-0">
          <AvatarFallback className="bg-primary/20 text-primary text-xs font-bold">
            SP
          </AvatarFallback>
        </Avatar>
        {!collapsed && (
          <div className="min-w-0">
            <p className="text-xs font-semibold truncate leading-tight">Son Phung</p>
            <p className="text-[10px] text-muted-foreground">Ultra Member</p>
          </div>
        )}
      </div>
    </div>
  )
}
