import type { ReactNode } from "react";
import { HStack, VStack } from "@astryxdesign/core/Layout";
import { StatusDot, type StatusDotVariant } from "@astryxdesign/core/StatusDot";
import { Text } from "@astryxdesign/core/Text";

interface StatusCellProps {
  /** Semantic dot variant. */
  variant: StatusDotVariant;
  /** Status label; used for both the dot's a11y label and the visible text. */
  label: string;
  /** Whether the dot should pulse to indicate activity. */
  isPulsing?: boolean;
  /** Optional second supporting line under the status. */
  detail?: ReactNode;
}

/**
 * Status indicator for table cells: `StatusDot` + semibold label, with an
 * optional secondary detail line underneath. Extracted from the recurring
 * status columns across the provider/integration list pages.
 */
export function StatusCell({ variant, label, isPulsing, detail }: StatusCellProps) {
  return (
    <VStack gap={0}>
      <HStack gap={2} vAlign="center">
        <StatusDot variant={variant} label={label} isPulsing={isPulsing} />
        <Text type="supporting" weight="semibold">
          {label}
        </Text>
      </HStack>
      {detail ? (
        <Text type="supporting" color="secondary">
          {detail}
        </Text>
      ) : null}
    </VStack>
  );
}