import { Box, Group, Text } from "@mantine/core";
import { memo } from "react";
import type { LucideIcon } from "lucide-react";
import { cv } from "../constants";

interface StatKpiProps {
  icon: LucideIcon;
  label: string;
  value: string;
  delta: string;
  deltaColor: string;
  divider?: boolean;
}

export const StatKpi = memo(function StatKpi({
  icon: Icon,
  label,
  value,
  delta,
  deltaColor,
  divider,
}: StatKpiProps) {
  return (
    <Box
      px={4}
      className={
        divider ? "lg:border-l lg:border-edr-border lg:pl-7" : undefined
      }
    >
      <Group gap={6} align="center" mb={7} wrap="nowrap">
        <Icon size={15} color={cv("edr-muted")} className="shrink-0" />
        <Text fz={12} fw={600} c="edr-muted" truncate>
          {label}
        </Text>
      </Group>
      <Group gap={8} align="flex-end" wrap="nowrap">
        <Text fz={22} fw={800} lh={1} c="edr-text" truncate>
          {value}
        </Text>
        <Text fz={12} fw={600} lh={1.3} c={deltaColor} truncate>
          {delta}
        </Text>
      </Group>
    </Box>
  );
});
