import Image from "next/image";

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

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

type CompatibilityCardProps = CompatibilityAction;

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>
    )
}