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

export default function ShowLoading() {
    return (
        <div className="flex flex-col gap-6">
            {/* Header */}
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div className="flex items-center gap-4">
                    <Skeleton className="h-9 w-9 rounded-md" />
                    <div>
                        <Skeleton className="h-8 w-64" />
                        <Skeleton className="h-4 w-48 mt-2" />
                    </div>
                </div>
            </div>

            <div className="grid gap-6 md:grid-cols-[2fr_1fr]">
                <div className="flex flex-col gap-6">
                    {/* Setlist Card */}
                    <Card>
                        <CardHeader>
                            <CardTitle>
                                <Skeleton className="h-6 w-24" />
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <SetlistSkeleton />
                        </CardContent>
                    </Card>
                </div>

                {/* Sidebar */}
                <div className="flex flex-col gap-4">
                    <Card>
                        <CardHeader className="pb-2">
                            <Skeleton className="h-4 w-16" />
                        </CardHeader>
                        <CardContent className="space-y-2">
                            <Skeleton className="h-5 w-40" />
                            <Skeleton className="h-4 w-32" />
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="pb-2">
                            <Skeleton className="h-4 w-24" />
                        </CardHeader>
                        <CardContent>
                            <Skeleton className="h-10 w-full" />
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}