import {
  createStyles,
  Text,
  Container,
  rem,
  Anchor,
  Image,
} from "@mantine/core";
// import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react';
// import { MantineLogo } from '@mantine/ds';
import logo from "./assets/logos/logo-text.png";
import fund from "./assets/logos/fund.png";
import association from "./assets/logos/association.png";
import glm from "./assets/logos/glm.png";

const useStyles = createStyles((theme) => ({
  footer: {
    paddingTop: rem(40),
    paddingBottom: rem(40),
    backgroundColor: "#eb7b1a",
    borderTop: `${rem(1)} solid ${theme.colors.dark[5]}`,
  },

  logo: {
    maxWidth: rem(200),

    [theme.fn.smallerThan("sm")]: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
  },

  description: {
    marginTop: rem(5),

    [theme.fn.smallerThan("sm")]: {
      marginTop: theme.spacing.xs,
      textAlign: "center",
    },
  },

  inner: {
    display: "flex",
    justifyContent: "space-between",

    [theme.fn.smallerThan("sm")]: {
      flexDirection: "column",
      alignItems: "center",
    },
  },

  groups: {
    display: "flex",
    flexWrap: "wrap",

    [theme.fn.smallerThan("sm")]: {
      display: "none",
    },
  },

  wrapper: {
    width: rem(160),
  },

  link: {
    display: "block",
    color: theme.colors.dark[4],
    fontSize: theme.fontSizes.sm,
    paddingTop: rem(3),
    paddingBottom: rem(3),

    "&:hover": {
      textDecoration: "none",
      color: "white",
    },
  },

  title: {
    fontSize: theme.fontSizes.lg,
    fontWeight: 700,
    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
    marginBottom: `calc(${theme.spacing.xs} / 2)`,
    color: theme.colors.dark[5],
  },

  afterFooter: {
    display: "flex",
    justifyContent: "space-around",
    gap: "30px",
    alignItems: "center",
    marginTop: theme.spacing.xl,
    paddingTop: theme.spacing.xl,
    paddingBottom: theme.spacing.xl,
    borderTop: `${rem(1)} solid ${theme.colors.dark[4]}`,

    [theme.fn.smallerThan("sm")]: {
      flexDirection: "column",
    },
  },

  social: {
    [theme.fn.smallerThan("sm")]: {
      marginTop: theme.spacing.xs,
    },
  },
}));

interface FooterLinksProps {
  data: {
    title: string;
    links: { label: string; link: string }[];
  }[];
}

export function FooterLinks({ data }: FooterLinksProps) {
  const { classes } = useStyles();

  const groups = data.map((group) => {
    const links = group.links.map((link, index) => (
      <Text<"a">
        key={index}
        className={classes.link}
        component="a"
        href={link.link}
      >
        {link.label}
      </Text>
    ));

    return (
      <div className={classes.wrapper} key={group.title}>
        <Text className={classes.title}>{group.title}</Text>
        {links}
      </div>
    );
  });

  return (
    <footer className={classes.footer}>
      <Container className={classes.inner}>
        <div className={classes.logo}>
          {/* <Title order={3}>Литературные музеи России</Title> */}
          {/* <MantineLogo size={30} /> */}
          <Image src={logo} component="a" href='/' />
          <Text size="xs" color="#373A40" className={classes.description}>
            геоинформационный портал
          </Text>
          <Text size="xs" color="#373A40" className={classes.description}>
            Проект создан при поддержке Фонда "История Отечества"
          </Text>
        </div>
        <div className={classes.groups}>{groups}</div>
      </Container>
      <Container className={classes.afterFooter}>
        <Anchor href="https://fond.historyrussia.org/" target="_blank">
          <Image src={fund} maw={110} />
        </Anchor>
        <Anchor href="https://goslitmuz.ru/" target="_blank">
          <Image src={glm} maw={300} />
        </Anchor>
        <Anchor href="https://goslitmuz.ru/projects/174/2361/" target="_blank">
          <Image src={association} maw={90} />
        </Anchor>
      </Container>
    </footer>
  );
}