import Image from "next/image";

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

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

type PalmCardProps = Action;

export default function PalmCard({
  imageUrl,
  title,
  type,
  minutes,
}: PalmCardProps) {
  return (
    <Card className={styles.card}>
      <div className={styles.image}>
        <Image
          className={styles.palmImage}
          src={imageUrl}
          alt="Palm image"
          width={99}
          height={123}
        />
      </div>
      <div className={styles.content}>
        <div className={styles.info}>
          <Typography size="lg" align="left">
            {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>
      </div>
    </Card>
  );
}
