import Image from "next/image";
import clsx from "clsx";

import {
  Button,
  Card,
  Icon,
  IconName,
  MetaLabel,
  Typography,
} from "@/components/ui";
import { Action } from "@/entities/dashboard/types";

import styles from "./MeditationCard.module.scss";

interface MeditationCardProps extends Action {
  className?: string;
}

export default function MeditationCard({
  imageUrl,
  title,
  type,
  minutes,
  className,
}: MeditationCardProps) {
  return (
    <Card className={clsx(styles.card, className)}>
      <Image
        className={styles.meditationImage}
        src={imageUrl}
        alt="Meditation image"
        width={342}
        height={216}
        style={{
          width: "auto",
          height: "216px",
        }}
      />
      <div className={styles.content}>
        <div className={styles.info}>
          <Typography size="lg" weight="regular">
            {title}
          </Typography>
          <MetaLabel
            iconLabelProps={{
              iconProps: {
                name: IconName.Video,
                color: "#6B7280",
                size: {
                  width: 24,
                  height: 25,
                },
              },
              children: <Typography color="secondary">{type}</Typography>,
            }}
          >
            {minutes} min
          </MetaLabel>
        </div>
        <Button className={styles.button}>
          <Icon
            className={styles.icon}
            name={IconName.Chevron}
            size={{
              width: 18,
              height: 18,
            }}
            color="#A0A7B5"
          />
        </Button>
      </div>
    </Card>
  );
}
