import Image from "next/image";
import Card from "../ui/Card/Card"
import Typography from "../ui/Typography/Typography"
import styles from "./MeditationCard.module.scss"
import Icon, { IconName } from "../ui/Icon/Icon";
import MetaLabel from "../ui/MetaLabel/MetaLabel";
import Button from "../ui/Button/Button";

export default function MeditationCard() {
    return (
        <Card className={styles.card}>
            <Image
                className={styles.logo}
                src="/meditation-card.png"
                alt="Meditation image"
                width={342}
                height={216}
            />
            <div className={styles.content}>
                <div className={styles.info}>
                    <Typography size="lg" weight="regular">
                        Reset
                    </Typography>
                    <MetaLabel iconLabelProps={{
                        iconProps: {
                            name: IconName.Video,
                            color: "#6B7280",
                            size: {
                                width: 24,
                                height: 25
                            }
                        },
                        children: <Typography color="secondary">Therapy</Typography>
                    }}>
                        15 min
                    </MetaLabel>
                </div>
                <Button className={styles.button}>
                    <Icon
                        className={styles.icon}
                        name={IconName.Chevron}
                        size={{
                            width: 18,
                            height: 18
                        }}
                        color="#A0A7B5"
                    />
                </Button>
            </div>
        </Card>
    )
}