'use client';
 
import { Button } from '@/ui/Button';
import { Image } from '@/ui/Image';
import { TeamHero } from '@/ui/TeamHero';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { StatGrid } from '@/ui/StatGrid';
 
interface TeamDetailsHeaderProps {
  teamId: string;
  name: string;
  tag?: string;
  description?: string;
  logoUrl?: string;
  memberCount: number;
  foundedDate?: string;
  isAdmin?: boolean;
  onAdminClick?: () => void;
}
 
export function TeamDetailsHeader({
  name,
  tag,
  description,
  logoUrl,
  memberCount,
  foundedDate,
  isAdmin,
  onAdminClick,
}: TeamDetailsHeaderProps) {
  return (
    <TeamHero
      title={
        <div className="flex items-center gap-3">
          {name}
          {tag && <Badge variant="outline">[{tag}]</Badge>}
        </div>
      }
      description={description || 'No mission statement provided.'}
      sideContent={
        <div className="w-32 h-32 bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-default)] flex items-center justify-center overflow-hidden rounded-lg">
          {logoUrl ? (
            <Image src={logoUrl} alt={name} width={128} height={128} />
          ) : (
            <Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
          )}
        </div>
      }
      stats={
        <StatGrid
          columns={2}
          variant="box"
          stats={[
            {
              label: 'Personnel',
              value: `${memberCount} Units`,
            },
            {
              label: 'Established',
              value: foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown',
            }
          ]}
        />
      }
      actions={
        <>
          {isAdmin && (
            <Button variant="secondary" onClick={onAdminClick}>
              Configure
            </Button>
          )}
          <Button variant="primary">
            Join Request
          </Button>
        </>
      }
    />
  );
}