import { Box, Text, HStack, Link as ChakraLink } from "@chakra-ui/react";
import { Link } from "@/i18n/navigation";
import { useTranslations } from "next-intl";

export default function Footer() {
  const t = useTranslations();

  return (
    <Box as="footer" bg="bg.muted" mt="auto">
      <HStack
        display="flex"
        justify={{ base: "center", md: "space-between" }}
        alignContent="center"
        maxW="8xl"
        mx="auto"
        wrap="wrap"
        px={{ base: 4, md: 8 }}
        position="relative"
        minH="16"
      >
        <Text fontSize="sm" color="fg.muted">
          © {new Date().getFullYear()}
          <ChakraLink
            target="_blank"
            rel="noopener noreferrer"
            href="/"
            color={{ base: "primary.500", _dark: "primary.300" }}
            focusRing="none"
            ml="1"
          >
            {"Game Calendar"}
          </ChakraLink>
          . {t("all-right-reserved")}
        </Text>

        <HStack spaceX={4}>
          <ChakraLink
            as={Link}
            href="/privacy"
            fontSize="sm"
            color="fg.muted"
            focusRing="none"
            position="relative"
            textDecor="none"
            transition="color 0.3s ease-in-out"
            _hover={{
              color: { base: "primary.500", _dark: "primary.300" },
            }}
          >
            {t("privacy-policy")}
          </ChakraLink>
          <ChakraLink
            as={Link}
            href="/terms"
            fontSize="sm"
            color="fg.muted"
            focusRing="none"
            position="relative"
            textDecor="none"
            transition="color 0.3s ease-in-out"
            _hover={{
              color: { base: "primary.500", _dark: "primary.300" },
            }}
          >
            {t("terms-of-service")}
          </ChakraLink>
        </HStack>
      </HStack>
    </Box>
  );
}