import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core';
import { Carousel } from '@mantine/carousel';
import { useLoaderData } from 'react-router-dom';
import Markdown from 'react-markdown';

const useStyles = createStyles((theme) => ({
  content: {
    padding: rem(30)
  },

  title: {
    fontSize: rem(55),
    lineHeight: 1.2,
    fontWeight: 900,
    paddingBottom: rem(20),
    [theme.fn.smallerThan('xs')]: {
      fontSize: rem(28),
    },
  }
}));





export function Article() {
  const articleData = useLoaderData();
  const { classes } = useStyles();
  const article = articleData.data[0].attributes
  // console.log(articleData)

  const generateCarousel = () => {
    if (articleData.data[0].attributes.carousel.data) {
      return (
        <Carousel slideSize="70%" mih={200} mah={500} slideGap="md" loop>
          {articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide><Image fit='fill' mih={200} mah={500} mx="auto" radius="md" src={`https://strapi.litmusmap.ru${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
        </Carousel>
      )
    }
  }

  return (
    <Container className={classes.content}>
      <Title order={1} className={classes.title}>
        {article.title}
      </Title>
      <TypographyStylesProvider>
        <Markdown>{article.content}</Markdown>
      </TypographyStylesProvider>
      {generateCarousel()}
    </Container>
  );
}