import { Card, CardBody, Image, Stack, Heading, Text, AspectRatio, LinkBox, LinkOverlay } from "@chakra-ui/react";

const CharacterCard = (props) => {
    return (
        <Card maxWidth="sm" h="100%">
            <CardBody p="0">
                <LinkBox>
                    <LinkOverlay href={"/chat/" + props.charId}>
                        <AspectRatio maxWidth="100%" ratio={1}>
                            <Image
                                src={props.image}
                                alt={props.alt}
                                borderRadius="8px 8px 0 0"
                                width="100%"
                                height="100%"
                            />
                        </AspectRatio>
                    </LinkOverlay>
                </LinkBox>
                <Stack mt="6" spacing="3" m="0.5rem" maxHeight="9rem">
                    <Heading size="md" className="line-clamp" overflow="hidden" textOverflow="ellipsis">{props.name}</Heading>
                    <Text fontStyle="italic" fontSize="0.75rem">@{props.creator}</Text>
                    <Text fontSize="0.75rem" overflow="hidden" textOverflow="ellipsis" className="line-clamp-2">{props.description}</Text>
                </Stack>
            </CardBody>
        </Card>
    );
};

export default CharacterCard;