import { cn } from "@/lib/utils";

interface Props {
    count?: number;
    className?: string;
}

const MemoSkeleton = ({ count = 3, className }: Props) => {
    return (
        <div className={cn("w-full space-y-4", className)}>
            {Array.from({ length: count }).map((_, i) => (
                <div
                    key={i}
                    className="rounded-xl border border-border bg-card p-4 space-y-3 animate-pulse"
                >
                    {/* Header: avatar + name + time */}
                    <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-full bg-muted" />
                        <div className="space-y-1.5 flex-1">
                            <div className="h-3 w-24 rounded-md bg-muted" />
                            <div className="h-2.5 w-16 rounded-md bg-muted/60" />
                        </div>
                    </div>

                    {/* Content lines */}
                    <div className="space-y-2">
                        <div className="h-3 w-full rounded-md bg-muted" />
                        <div className="h-3 w-4/5 rounded-md bg-muted/80" />
                        <div className="h-3 w-3/5 rounded-md bg-muted/60" />
                    </div>

                    {/* Footer: action buttons */}
                    <div className="flex items-center gap-4 pt-1">
                        <div className="h-3 w-10 rounded-md bg-muted/50" />
                        <div className="h-3 w-10 rounded-md bg-muted/50" />
                        <div className="h-3 w-10 rounded-md bg-muted/50" />
                    </div>
                </div>
            ))}
        </div>
    );
};

export default MemoSkeleton;
