"use client";

import { Box, Text, HStack, Flex, 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">
      <Flex
        justify={{ base: "center", md: "space-between" }}
        align="center"
        maxW="8xl"
        mx="auto"
        wrap="wrap"
        px={{ base: 4, md: 8 }}
        py={4}
        gap={3}
      >
        <Text fontSize="sm" color="fg.muted">
          © {new Date().getFullYear()}{" "}
          <ChakraLink
            href="/"
            color={{ base: "primary.600", _dark: "primary.300" }}
            focusRing="none"
            fontWeight="semibold"
          >
            iddaai
          </ChakraLink>
          . {t("all-right-reserved")}
        </Text>

        <HStack spaceX={4}>
          <ChakraLink
            as={Link}
            href="/privacy-and-security-policy"
            fontSize="sm"
            color="fg.muted"
            focusRing="none"
            textDecor="none"
            transition="color 0.2s"
            _hover={{
              color: { base: "primary.500", _dark: "primary.300" },
            }}
          >
            {t("privacy-policy")}
          </ChakraLink>
          <ChakraLink
            as={Link}
            href="/terms-of-use"
            fontSize="sm"
            color="fg.muted"
            focusRing="none"
            textDecor="none"
            transition="color 0.2s"
            _hover={{
              color: { base: "primary.500", _dark: "primary.300" },
            }}
          >
            {t("terms-of-service")}
          </ChakraLink>
          <ChakraLink
            as={Link}
            href="/refund-policy"
            fontSize="sm"
            color="fg.muted"
            focusRing="none"
            textDecor="none"
            transition="color 0.2s"
            _hover={{
              color: { base: "primary.500", _dark: "primary.300" },
            }}
          >
            {t("refund-policy")}
          </ChakraLink>
        </HStack>
      </Flex>
    </Box>
  );
}
