"use client";
import Image from "next/image";
import { PackageGroup } from "@/types/models";
import { URL_IMAGE } from "@/utils/url";
import { useTranslations } from "next-intl";
import { BookOpen, Clock, MapPin, Users } from "lucide-react";
import { Link } from "@/i18n/navigation";

export function PackageCourseCard({ group }: { group: PackageGroup }) {
    const t = useTranslations();

    return (
        <div className="flex gap-4 bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-300 hover:shadow-md transition-all duration-300 group">
            {/* Thumbnail */}
            <div className="relative h-24 w-36 flex-shrink-0 rounded-lg overflow-hidden bg-gradient-to-br from-purple-50 to-indigo-100">
                {group.image ? (
                    <Image
                        src={`${URL_IMAGE}/${group.image}`}
                        alt={group.name}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-500"
                        sizes="144px"
                    />
                ) : (
                    <div className="size-full flex items-center justify-center">
                        <BookOpen className="size-8 text-purple-300" />
                    </div>
                )}
            </div>

            {/* Details */}
            <div className="flex flex-col justify-between flex-1 min-w-0">
                <div className="space-y-1">
                    <h3 className="font-bold text-gray-800 text-base leading-snug group-hover:text-purple-700 transition-colors line-clamp-2">
                        {group.name}
                    </h3>
                    {group.category && (
                        <span className="inline-block text-xs text-purple-600 bg-purple-50 border border-purple-100 rounded-full px-2 py-0.5 font-medium">
                            {group.category.name}
                        </span>
                    )}
                    {group.description && (
                        <p className="text-gray-500 text-xs line-clamp-2 leading-relaxed">
                            {group.description}
                        </p>
                    )}
                </div>

                {/* Meta row */}
                <div className="flex flex-wrap gap-3 text-xs text-gray-500 mt-2">
                    {group.hours && (
                        <span className="flex items-center gap-1">
                            <Clock className="size-3.5 text-purple-400" />
                            {group.hours} {t("custom.hours")}
                        </span>
                    )}
                    {group.type && (
                        <span className="flex items-center gap-1">
                            <MapPin className="size-3.5 text-indigo-400" />
                            {group.type === "classroom" ? "حضوري" : group.type}
                        </span>
                    )}
                    {group.participants_count !== undefined && (
                        <span className="flex items-center gap-1">
                            <Users className="size-3.5 text-green-500" />
                            {group.participants_count}
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
}