import {
	Card,
	CardContent,
	CardFooter,
	CardHeader,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export function ContentSkeleton() {
	return (
		<Card className="overflow-hidden border-none shadow-sm">
			<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
				<Skeleton className="h-8 w-8 rounded-full" />
				<div className="flex flex-col gap-1.5">
					<Skeleton className="h-3 w-24" />
					<Skeleton className="h-2 w-16" />
				</div>
			</CardHeader>
			<CardContent className="p-0 aspect-square">
				<Skeleton className="h-full w-full" />
			</CardContent>
			<CardFooter className="p-4 flex flex-col gap-4">
				<div className="w-full flex justify-between">
					<div className="flex gap-2">
						<Skeleton className="h-8 w-12 rounded-md" />
						<Skeleton className="h-8 w-12 rounded-md" />
					</div>
					<Skeleton className="h-8 w-20 rounded-md" />
				</div>
				<div className="w-full space-y-2">
					<Skeleton className="h-4 w-full" />
					<div className="flex gap-1">
						<Skeleton className="h-4 w-12" />
						<Skeleton className="h-4 w-12" />
					</div>
				</div>
			</CardFooter>
		</Card>
	);
}