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

export interface MetricTileProps {
  label: string;
  value: string;
  highlight?: boolean;
}

/** Small flat label/value tile used across the detail sections. */
export function MetricTile({ label, value, highlight }: MetricTileProps) {
  return (
    <Paper
      radius="md"
      withBorder
      px="md"
      py="sm"
      style={{
        background: highlight ? "var(--mantine-color-yellow-0)" : "var(--mantine-color-gray-0)",
        borderColor: highlight
          ? "var(--mantine-color-yellow-3)"
          : "var(--mantine-color-gray-2)",
      }}
    >
      <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
        {label}
      </Text>
      <Text size="sm" fw={600} mt={4} style={{ lineHeight: 1.4 }}>
        {value}
      </Text>
    </Paper>
  );
}
