import { Group, Indicator, Text } from "@mantine/core";

interface SectionHeadingProps {
  label: string;
  /** Show a pulsing red "live" dot before the label. */
  live?: boolean;
  /** Appended as "· N" after the label when greater than 1. */
  count?: number;
  /** Optional right-aligned action (e.g. a "View all" link). */
  action?: React.ReactNode;
}

/**
 * Compact, uppercase section label used across the started-tournament home
 * surfaces. Mirrors the original "Live Matches" heading treatment.
 */
const SectionHeading = ({ label, live, count, action }: SectionHeadingProps) => {
  return (
    <Group gap={10} px="md" mb={6} align="center" wrap="nowrap" justify="space-between">
      <Group gap={10} align="center" wrap="nowrap" style={{ minWidth: 0 }}>
        {live && (
          <Indicator
            size={8}
            color="red"
            processing
            position="middle-start"
            offset={0}
          />
        )}
        <Text size="xs" fw={700} c="dimmed" tt="uppercase" lts="0.05em" lineClamp={1}>
          {label}
          {count && count > 1 ? ` · ${count}` : ""}
        </Text>
      </Group>
      {action}
    </Group>
  );
};

export default SectionHeading;