"use client";

import Image from "next/image";
import Link from "next/link";
import ArrowForwardOutlinedIcon from '@mui/icons-material/ArrowForwardOutlined';
import { routes } from "@/src/config/routes";

interface TrainingCardProps {
    training: {
        title: string;
        imageUrl: string;
        date: string;
        readTime: string;
        category: string;
        description: string;
        slug: string;
    }
}

export default function TrainingList({ training }: TrainingCardProps) {

    return (
        <article
            className="
                group
                rounded-lg
                overflow-hidden
                bg-[#f2f0f2]/20
                border
                border-gray-100
                transition
                duration-300
                hover:shadow-lg
            "
        >
            <Link href={routes.trainingDetails(training?.slug)}>
                <div
                    className="
            relative
            w-full
            h-[280px]
            sm:h-[320px]
            lg:h-[400px]
            overflow-hidden
        "
                >
                    {training?.imageUrl &&
                        <Image
                            src={process.env.NEXT_PUBLIC_API_IMAGE_URL + training?.imageUrl}
                            alt={training.title}
                            fill
                            sizes="
                (max-width: 640px) 100vw,
                (max-width: 1024px) 50vw,
                33vw
            "
                            className="
                object-cover
                transition
                duration-500
                group-hover:scale-105
            "
                        />}
                </div>
            </Link>
            <div
                className="
                    p-4
                    sm:p-5
                    lg:p-6
                "
            >
                <h3
                    className="
                        text-lg
                        sm:text-xl
                        font-semibold
                        leading-snug
                        text-primary
                        line-clamp-2
                        mb-3
                    "
                >
                    <Link href={routes.trainingDetails(training?.slug)}
                        className="hover:text-secondary"
                    >
                        {training.title}
                    </Link>
                </h3>
                <p
                    className="
        mb-4
        line-clamp-3
        text-md
        leading-6
        text-primary
    "
                    dangerouslySetInnerHTML={{
                        __html: training?.description || "",
                    }}
                />
                <Link href={routes.trainingDetails(training?.slug)}
                    className="
                    inline-flex
                    items-center
                    gap-2
                    text-sm
                    sm:text-base
                    font-semibold
                    text-primary
                    transition
                    hover:text-secondary
                    "
                >
                    Read More
                    <span>
                        <ArrowForwardOutlinedIcon />
                    </span>
                </Link>
            </div>
        </article>
    )
}