"use client";

import {
  Box,
  Center,
  Heading,
  SimpleGrid,
  Spinner,
  Text,
  Badge,
  Stack,
} from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { useValueBoard } from "@/lib/api/value-board/use-hooks";
import ValueBoardCard from "./value-board-card";

export default function ValueBoardContent() {
  const t = useTranslations("value-board");
  const { data, isLoading, error } = useValueBoard("football");
  const items = data?.data ?? [];

  return (
    <Box maxW="1200px" mx="auto" px={{ base: 4, md: 6 }} py={8}>
      <Heading as="h1" size="xl" fontWeight="bold">
        {t("title")}
      </Heading>
      <Text color="fg.muted" mt={2} maxW="640px">
        {t("tagline")}
      </Text>
      <Badge colorPalette="green" variant="subtle" mt={3}>
        ✓ {t("proof")}
      </Badge>

      {isLoading && (
        <Center minH="320px">
          <Spinner size="lg" />
        </Center>
      )}

      {error && !isLoading && (
        <Center minH="200px">
          <Text color="fg.muted">{t("error")}</Text>
        </Center>
      )}

      {!isLoading && !error && items.length === 0 && (
        <Center minH="200px">
          <Text color="fg.muted">{t("empty")}</Text>
        </Center>
      )}

      {!isLoading && !error && items.length > 0 && (
        <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={5} mt={6}>
          {items.map((item) => (
            <ValueBoardCard key={item.id} item={item} />
          ))}
        </SimpleGrid>
      )}

      <Stack mt={10} gap={1}>
        <Text fontSize="xs" color="fg.muted">
          {t("disclaimer")}
        </Text>
      </Stack>
    </Box>
  );
}
