starr-philproperties/src/modules/client/components/LessonCard.jsx

// LessonCard — grid card for a standalone Lesson. Shared by LessonsList.jsx and
// Dashboard.jsx's "Featured Lessons" section. Mirrors UnitCard.jsx; a Lesson has
// no lesson_count/quiz_id of its own — shows unit_count instead (how many Units
// it's attached to).

import { Timer, LockIcon, Layers } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

function formatDuration(seconds = 0) {
    if (!seconds) return null;
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    if (h && m) return `${h}h ${m}m`;
    if (h) return `${h}h`;
    return `${m}m`;
}

export const LessonCard = ({ lesson, onViewDetails }) => {
    const locked = lesson.is_locked;
    const duration = formatDuration(lesson.duration_seconds);
    const unitCount = Number(lesson.unit_count ?? 0);
    const courses = lesson.courses ?? [];

    return (
        <div
            className={cn(
                "bg-card rounded-2xl border p-4 flex flex-col gap-2.5 transition-all cursor-pointer group",
                "hover:shadow-sm",
                locked
                    ? "opacity-80 hover:opacity-100 hover:border-muted-foreground/40"
                    : "hover:bg-muted/60 dark:hover:border-blue-500"
            )}
            onClick={() => onViewDetails(lesson)}
        >
            <div className="flex flex-wrap gap-1.5">
                {locked && (
                    <Badge variant="secondary">
                        <LockIcon className="size-3" /> Locked
                    </Badge>
                )}
                {unitCount > 0 ? (
                    <Badge variant="outline">
                        <Layers className="size-3" /> In {unitCount} unit{unitCount === 1 ? "" : "s"}
                        {courses[0] && (
                            <>
                                {" "}· <span className="truncate max-w-[120px] inline-block align-bottom">{courses[0].title}</span>
                                {courses.length > 1 ? ` +${courses.length - 1}` : ""}
                            </>
                        )}
                    </Badge>
                ) : (
                    !locked && <Badge variant="outline" className="text-muted-foreground">Standalone</Badge>
                )}
            </div>

            <div className="flex flex-col gap-1">
                <h1 className="text-lg font-medium leading-snug line-clamp-3 transition-colors group-hover:text-blue-700 dark:group-hover:text-blue-400">
                    {lesson.title}
                </h1>
                {lesson.description && (
                    <p className="text-sm leading-relaxed line-clamp-2 group-hover:text-blue-700 dark:group-hover:text-blue-400">
                        {lesson.description}
                    </p>
                )}
            </div>

            <div className="flex items-center justify-between pt-2 mt-auto border-t">
                <div className={`flex items-center gap-3 text-sm [&_svg]:size-4 ${locked ? "text-muted-foreground" : "text-card-foreground group-hover:text-blue-700 dark:group-hover:text-blue-400"}`}>
                    <div className="flex items-center gap-1">
                        <Timer /> {duration ?? "—"}
                    </div>
                </div>
                {locked && (
                    <span className="text-xs text-muted-foreground">Upgrade to unlock</span>
                )}
            </div>
        </div>
    );
};

export const LessonCardSkeleton = () => (
    <div className="bg-card rounded-2xl border p-4 flex flex-col gap-2.5">
        <div className="flex gap-1.5">
            <Skeleton className="h-5 w-20 rounded-full" />
        </div>
        <Skeleton className="h-6 w-3/4" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
        <div className="pt-2 mt-auto border-t">
            <Skeleton className="h-4 w-24" />
        </div>
    </div>
);