// GridHeader.tsx
import { format } from "date-fns";

export function GridHeader({ days }: { days: Date[] }) {
    return (
        <div
            className="grid sticky top-0 z-30 bg-background"
            style={{
                display: "grid",
                gridTemplateColumns: `100px repeat(${days.length},340px)`,
            }}
        >
            <div /> {/* Empty corner for time labels */}
            {days.map((d) => (
                <div
                    key={d.toDateString()}
                    className="p-2 font-semibold text-center border-b"
                >
                    {format(d, "EEE M/d/yyyy")}
                </div>
            ))}
        </div>
    );
}