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;
    informationSection: React.ReactNode;
    phoneNumberSection: React.ReactNode;
    notesSection: React.ReactNode;
    projectsSection: React.ReactNode;
};

export default function CustomerDetailContent({
                                                  loading,
                                                  customer,
                                                  informationSection,
                                                  phoneNumberSection,
                                                  notesSection,
                                                  projectsSection,
                                              }: 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="flex flex-col gap-4 h-full">
            {/* Row 1: 50/50 layout */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {informationSection}
                {phoneNumberSection}
            </div>

            {/* Row 2: Fill remaining height */}
            <div className="flex-1 grid grid-cols-1 xl:grid-cols-10 gap-4 min-h-0">
                <div className="xl:col-span-6 flex flex-col min-h-0">
                    <div className="flex-1 overflow-auto">{notesSection}</div>
                </div>
                <div className="xl:col-span-4 flex flex-col min-h-0">
                    <div className="flex-1 overflow-auto">{projectsSection}</div>
                </div>
            </div>
        </div>
    );
}