"use client";
import { courseHref } from "@/lib/course-url";
import { Link } from 'react-router-dom';
import { NotepadText, Pin, SaudiRiyal } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import TrCourseImg from '@/assets/used-images/TrainingCoursesImg.png';
import Image from "@/ui/image";

// headingLevel: 2 في صفحة القائمة (مباشرة تحت <h1>)، و3 داخل أقسام لها <h2> خاص (مثل "برامج ذات صلة")
const TrainingCourseBox = ({ course, selectedCity, headingLevel = 2 }: { course: any; selectedCity?: any; headingLevel?: 2 | 3 }) => {
    const Heading = headingLevel === 3 ? 'h3' : 'h2';
    const theImage = course?.type_course === 0 ? course?.subject?.category?.image : course?.category?.image;
    const courseURL = courseHref(course, { city_id: selectedCity });
    const { t } = useTranslation();

    return (
        <Link to={courseURL} className='relative min-h-[180px] pt-7 pb-3 px-3 grid grid-cols-[25%_74%] border rounded-lg w-full max-lg:w-full max-lg:grid-cols-1 gap-2'>

            <div className='relative w-32 bg-transparent max-lg:h-16'>
                <div className='lg:size-32 flex justify-center items-center lg:absolute -top-[4.5rem] inset-y-0 -start-11 h-28 w-48 max-lg:relative max-lg:-start-7'>
                    <Image
                        src={theImage || TrCourseImg}
                        alt={course?.title || ''}
                        className='object-cover w-[11.9rem] h-[6.9rem] lg:size-32 z-10 rounded-lg border-secondary-tw border-4'
                    />
                </div>
            </div>

            <div className='flex flex-col justify-between'>
                <div className='text-start'>
                    <Heading className='text-primary-tw text-lg capitalize'>
                        {course?.title}
                    </Heading>

                    {(course?.subject?.category?.title && course?.subject?.category?.title !== "-") && (
                        <div className='flex items-center gap-2 mt-1 mb-1'>
                            <span>
                                <Pin fill='#7A7A7A' size={16} color='#7A7A7A' />
                            </span>
                            <p className='text-semi-gray text-sm'>
                                {course?.subject?.category?.title}
                            </p>
                        </div>
                    )}

                    {
                        (course?.subject?.title && course?.subject?.title !== "-") && (
                            <div className="flex items-center gap-2  mt-1 mb-1">
                                <span>
                                    <NotepadText fill="white" size={16} color="#7A7A7A" />
                                </span>
                                <p className="text-semi-gray text-sm">
                                    {course?.subject?.title}
                                </p>
                            </div>
                        )
                    }

                </div>

                <div className='flex items-end justify-end gap-2 flex-wrap max-lg:items-end'>
                    <p className=' text-semi-gray text-sm'>
                        {t('training-courses.price-start')} :
                    </p>

                    <p className='bg-primary-tw text-sm flex items-center gap-1 text-white px-3 py-0.5 rounded-lg'>
                        <span>
                            {course?.min_price || " 0 "}
                        </span>
                        <span className='w-3'>
                            <SaudiRiyal size={15} />
                        </span>
                    </p>
                </div>
            </div>
        </Link>
    )
}
export default TrainingCourseBox;