import {Card} from "@/components/ui/card";
import {Skeleton} from "@/components/ui/skeleton";
import {Customer} from "@/services/customers/entities/customer";
import React from "react";

type Props = {
    loading: boolean;
    customer: Customer | null;
    sections: React.ReactNode[];
};

export default function CustomerDetailContent({loading, customer, sections}: Readonly<Props>) {
    if (loading) {
        return (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
                <Card className="p-4 space-y-2">
                    <Skeleton className="h-5 w-40"/>
                    <Skeleton className="h-4 w-64"/>
                    <Skeleton className="h-4 w-44"/>
                    <Skeleton className="h-4 w-72"/>
                </Card>
                <Card className="p-4 space-y-2">
                    <Skeleton className="h-5 w-40"/>
                    <Skeleton className="h-14 w-full"/>
                </Card>
                <Card className="p-4 space-y-2 md:col-span-2">
                    <Skeleton className="h-5 w-40"/>
                    <Skeleton className="h-20 w-full"/>
                </Card>
            </div>
        );
    }

    if (!customer) {
        return (
            <div className="text-center text-muted-foreground pt-20">
                <p className="text-lg">Keine Kundendaten gefunden.</p>
            </div>
        );
    }

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
            {sections}
        </div>
    );
}