import React from "react";

// GridBody.tsx
export function GridBody({ days, children }: { days: Date[]; children: any }) {
    const hours = Array.from({ length: 24 }, (_, i) => i);

    return (
        <div
            className="grid overflow-x-auto"
            style={{
                display: "grid",
                gridTemplateColumns: `100px repeat(${days.length},340px)`,
            }}
        >
            {hours.map((hour) => (
                <React.Fragment key={hour}>
                    {/* time label, sticky left */}
                    <div className="sticky left-0 bg-background border p-1 text-right text-sm z-10">
                        {hour}:00
                    </div>

                    {days.map((day) => (
                        <div
                            key={`${day}-${hour}`}
                            className="border h-20 relative"
                        >
                            {children && children(day, hour)}
                        </div>
                    ))}
                </React.Fragment>
            ))}
        </div>
    );
}
