import React, { ReactNode } from 'react';
import { Heading } from './Heading';
import { Text } from './Text';

interface TeamsHeaderProps {
  title: string;
  subtitle?: string;
  action?: ReactNode;
}

export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
  return (
    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
      <div className="space-y-2">
        <div className="flex items-center gap-3">
          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
          <Heading level={1} weight="bold" uppercase>{title}</Heading>
        </div>
        {subtitle && (
          <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
            {subtitle}
          </Text>
        )}
      </div>
      
      {action && (
        <div className="flex items-center">
          {action}
        </div>
      )}
    </div>
  );
}