import { createStyles, Card, Image, Stack, Text, Group, Flex } from '@mantine/core';
import globe from './assets/globe.png'


const useStyles = createStyles((theme) => ({
  card: {
    backgroundColor: theme.white,
  },

  title: {
    fontWeight: 700,
    fontFamily: theme.fontFamily,
    lineHeight: 1.2,
    '&:hover': {
      color: '#eb7b1a'
    }
  },

  body: {
    padding: theme.spacing.md,
  },

  address: {
    "&:hover": {
      cursor: "pointer",
      filter: 'brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)'
    }
  }
}));

interface ArticleCardVerticalProps {
  id: number;
  image: string;
  category: string;
  title: string;
  address: string;
  longitude: number;
  latitude: number;
  selected: number;
  // author: {
  //   name: string;
  //   avatar: string;
  // };
}

export function ArticleCardMobile({
  id,
  image,
  category,
  title,
  address,
  longitude,
  latitude,
  // author,
  selected,
  clickAddressAction
}: ArticleCardVerticalProps) {
  const { classes } = useStyles();
  return (
    <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
      <Group noWrap spacing={0}>
      {/* <Image src={image} height={140} width={100} component='a' href={`/article/${id}`}/> */}
        <Stack p='xs'>
          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb={0} color={id === selected ? '#e66a5a' : 'black'}>
            {title}
          </Text>
          <Flex align='center' onClick={() => clickAddressAction(id)} className={classes.address}>
            {/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
            <Image src={globe} style={{ width: 32, height: 32 }} />
            <Text size="xs" pl={5} pb={2}>
              {address}
              <br/>
              {`${longitude.toFixed(3).replace('.', ',')}°  ${latitude.toFixed(3).replace('.', ',')}°`}
            </Text>
          </Flex>
        </Stack>
      </Group>
    </Card>
  );
}