import { Paper, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core"

import { DASHBOARD_CARDS } from "../../config/dashboard.config"
import type { SummaryCardsProps } from "./types/summary-cards-props.type"

/**
 * Карточки сводных метрик dashboard.
 *
 * Используется для:
 *  - отображения количества assets, presets и hosts
 *  - компактного статуса загрузки данных
 */
export const SummaryCards = (props: SummaryCardsProps) => {
  const { isLoading, summary } = props

  return (
    <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
      {DASHBOARD_CARDS.map((card) => (
        <Paper bg="white" key={card.title} p="xl" radius="xl" shadow="xs" withBorder>
          <Stack gap="sm">
            {isLoading ? (
              <Skeleton height={42} width={86} />
            ) : (
              <Text c="violet.7" fw={850} fz={42} lh={0.9}>
                {summary[card.metric]}
              </Text>
            )}
            <Text fw={800}>{card.title}</Text>
            <Text c="dimmed" fz="sm" lh={1.55}>
              {card.description}
            </Text>
          </Stack>
        </Paper>
      ))}
    </SimpleGrid>
  )
}