'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';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { Box } from '@/ui/Box';
 
interface TeamDetailsHeaderProps {
  teamId: string;
  name: string;
  tag?: string;
  description?: string;
  logoUrl?: string;
  memberCount: number;
  memberCountLabel?: string;
  foundedDate?: string;
  foundedDateLabel?: string;
  isAdmin?: boolean;
  onAdminClick?: () => void;
}
 
export function TeamDetailsHeader({
  name,
  tag,
  description,
  logoUrl,
  memberCount,
  memberCountLabel,
  foundedDate,
  foundedDateLabel,
  isAdmin,
  onAdminClick,
}: TeamDetailsHeaderProps) {
  return (
    <TeamHero
      title={
        <Group gap={3}>
          {name}
          {tag && <Badge variant="outline">[{tag}]</Badge>}
        </Group>
      }
      description={description || 'No mission statement provided.'}
      sideContent={
        <Surface 
          variant="muted" 
          rounded="lg" 
          width="8rem" 
          height="8rem" 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          overflow="hidden"
          border
        >
          {logoUrl ? (
            <Image src={logoUrl} alt={name} width={128} height={128} />
          ) : (
            <Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
          )}
        </Surface>
      }
      stats={
        <StatGrid
          columns={2}
          variant="box"
          stats={[
            {
              label: 'Personnel',
              value: `${memberCount} Units`,
            },
            {
              label: 'Established',
              value: foundedDateLabel || 'Unknown',
            }
          ]}
        />
      }
      actions={
        <Group gap={3}>
          {isAdmin && (
            <Button variant="secondary" onClick={onAdminClick}>
              Configure
            </Button>
          )}
          <Button variant="primary">
            Join Request
          </Button>
        </Group>
      }
    />
  );
}