import { cn } from "@lume/utils";
import { useUserContext } from "./provider";

export function UserAbout({ className }: { className?: string }) {
	const user = useUserContext();

	if (!user) {
		return (
			<>
				<div
					className={cn(
						"h-4 w-20 bg-black/20 dark:bg-white/20 rounded animate-pulse",
						className,
					)}
				/>
				<div
					className={cn(
						"h-4 w-full bg-black/20 dark:bg-white/20 rounded animate-pulse",
						className,
					)}
				/>
				<div
					className={cn(
						"h-4 w-24 bg-black/20 dark:bg-white/20 rounded animate-pulse",
						className,
					)}
				/>
			</>
		);
	}

	return (
		<div className={cn("select-text break-p", className)}>
			{user.about || user.bio}
		</div>
	);
}