'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Plus } from 'lucide-react';
import { ExamType } from '../_types/Types';
// import { examStatusColors } from '@/_types/ExamColors';

interface CardProps {
    item: ExamType;
}

const Card: React.FC<CardProps> = ({ item }) => {
    const pathname = usePathname();
    const imageUrl = `https://picsum.photos/seed/${encodeURIComponent(item.id || item.title)}/400/250`;
    // const statusColor = examStatusColors[item.status] || examStatusColors.default;
    
    return (
        <div
            className="relative rounded-lg shadow-lg h-64 w-80 hover:scale-105 transition-transform duration-300"
            style={{
                backgroundImage: `url(${item?.image_path ? `${process.env.NEXT_PUBLIC_API_URL}/storage/${item?.image_path}` : imageUrl})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
            }}
        >
            <div className="absolute rounded-lg inset-0 bg-black opacity-40"></div>

            <div className="relative z-10 p-4 flex flex-col justify-between h-full text-white">
                <div className="flex justify-end items-start">
                    {/* <span
                        className={`${statusColor} text-black inline-block w-fit px-2 py-1 text-xs font-semibold rounded`}
                    >
                        {item.status}
                    </span> */}
                    <Link
                        className="relative p-2 rounded-full cursor-pointer"
                        href={`${pathname}/${item.slug}`}
                    >
                        <div className="absolute inset-0 bg-white opacity-20 hover:opacity-40 rounded-full"></div>
                        <Plus className="h-5 w-5 text-white" />
                    </Link>
                </div>

                <div>
                    <h3 className="text-xl font-bold">{item.title}</h3>
                    {item.description && (
                        <p className="text-sm mt-1 line-clamp-2">{item.description}</p>
                    )}
                    <p className="mt-2 text-lg font-semibold">£{item.price}</p>
                </div>
            </div>

        </div>
    );
}

export default Card;