// /src/app/components/UserHeader.tsx
import { Tabs } from '@/app/components/Tabs'
import PremierRankBadge from './PremierRankBadge'

type UserHeaderProps = {
  steamId: string
  name: string
  avatar?: string | null
  premierRank?: number | null
}

export default function UserHeader({ steamId, name, avatar, premierRank }: UserHeaderProps) {
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <img
          src={avatar || '/default-avatar.png'}
          alt={name ?? ''}
          width={64}
          height={64}
          className="rounded-full"
        />
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold text-gray-800 dark:text-white">{name}</h1>
            {typeof premierRank === 'number' && (
              <PremierRankBadge rank={premierRank} />
            )}
          </div>
          <p className="text-sm text-gray-500">{steamId}</p>
        </div>
      </div>

      <Tabs>
        <Tabs.Tab name="Statistiken" href={`/profile/${steamId}/stats`} />
        <Tabs.Tab name="Matches" href={`/profile/${steamId}/matches`} />
      </Tabs>
    </div>
  )
}