import React from "react";
import { Card, CardBody, Box, CardFooter, Heading, IconButton, Link, chakra } from "@chakra-ui/react"
import { useLink } from "../hooks"

export type CardType = {
    id: string
    title: string;
    text: string;
    image: string;
    href: string;
}

export type CardItemProps = {
    card: CardType
    renderImage: (card: any) => JSX.Element
}

export function CardItemView({ card, renderImage }: CardItemProps) {
    const link = useLink(card)

    return (
        <Card key={card.id}>
            {card.image && (
                <CardBody
                    pos="relative"
                    minH="200px"
                    sx={{
                        img: {
                            borderRadius: 'md',
                        },
                    }}
                >
                    {renderImage(card)}
                </CardBody>
            )}

            <Box
                as={CardFooter}
                display="flex"
                justify="center"
                alignContent="center"
                p={5}
                pt={0}
                w="full"
            >
                <Heading
                    w="80%"
                    position="relative"
                    mt="2"
                    textAlign="center"
                    size="md"
                >
                    {card.title}
                </Heading>

                <IconButton
                    as={Link}
                    target="_self"
                    href={link}
                    w="10%"
                    variant="link"
                    color="gray.800"
                    _hover={{
                        textDecoration: 'none',
                    }}
                    colorScheme="gray"
                    aria-label="See menu"
                    icon={<chakra.span fontSize="xl">{'→'}</chakra.span>}
                />
            </Box>
        </Card>
    )
}