import { Inter } from '@next/font/google'
import { Character } from '../utils/types'
const inter = Inter({ subsets: ['latin'] })
import { Container, Card, Col, Text } from "@nextui-org/react";

export const CharacterCard = (props: Character) => (
    <Container draggable
        css={{ h: "auto", $$cardColor: '$colors$primary' }}>

        <Card
            isPressable isHoverable >
            <Card.Footer
                isBlurred
                css={{
                    position: "absolute",
                    bgBlur: "#0f111466",
                    borderTop: "$borderWeights$light solid $gray800",
                    bottom: 0,
                    zIndex: 1,
                }}
            >
                <Col>
                    <Text size={14} weight="bold" transform="uppercase" color="#ffffffAA">
                        {props.species}
                    </Text>
                    <Text h4 color="white">
                        {props.name}
                    </Text>
                </Col>
            </Card.Footer>

            <Card.Image
                src={props.image}
                objectFit="cover"
                css={{
                    objectPosition: "0 20%"
                }}
                width="100%"
                height={220}
                alt="Card image background"
            />

        </Card>
    </Container >
);

// const CharacterCard = (props: Character) => {

//     return (


//         <a key={props.id} href={`character/${props.booru_tag}`} className={styles.card} target="_blank" rel="noopener noreferrer">
//             <img src={props.image} alt={''} />

//             <h2 className={inter.className}>
//                 {props.name} <span>-&gt;</span>
//             </h2>
//             <p className={inter.className}>
//                 {props.species}
//             </p>
//         </a>
//     )
// }

export default CharacterCard