import Image from "next/image";

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

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

type CompatibilityCardProps = Action;

export default function CompatibilityCard({
  imageUrl,
  title,
  type,
  minutes,
}: CompatibilityCardProps) {
  return (
    <Card className={styles.card}>
      <Image
        className={styles.compatibilityImage}
        src={imageUrl}
        alt="Compatibility image"
        width={120}
        height={110}
      />
      <div className={styles.content}>
        <Typography size="lg" weight="medium" align="left">
          {title}
        </Typography>
        <MetaLabel
          iconLabelProps={{
            iconProps: {
              name: IconName.Article,
            },
            children: <Typography color="secondary">{type}</Typography>,
          }}
        >
          {minutes} min
        </MetaLabel>
      </div>
    </Card>
  );
}