SixFlagsSuperCalendar/components/MobileCardList.tsx

import type { Park } from "@/lib/scrapers/types";
import type { DayData } from "@/lib/db";
import type { Region } from "@/lib/parks";
import { ParkCard } from "./ParkCard";

interface MobileCardListProps {
  grouped: Map<Region, Park[]>;
  weekDates: string[];
  data: Record<string, Record<string, DayData>>;
  today: string;
  rideCounts?: Record<string, number>;
  coastersOnly?: boolean;
}

export function MobileCardList({ grouped, weekDates, data, today, rideCounts, coastersOnly }: MobileCardListProps) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20, paddingTop: 14 }}>
      {Array.from(grouped.entries()).map(([region, parks]) => (
        <div key={region} data-region={region}>
          {/* Region heading */}
          <div style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            marginBottom: 10,
            paddingLeft: 2,
          }}>
            <div style={{
              width: 3,
              height: 14,
              borderRadius: 2,
              background: "var(--color-region-accent)",
              flexShrink: 0,
            }} />
            <span style={{
              fontSize: "0.65rem",
              fontWeight: 700,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              color: "var(--color-text-muted)",
            }}>
              {region}
            </span>
          </div>

          {/* Park cards */}
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {parks.map((park) => (
              <ParkCard
                key={park.id}
                park={park}
                weekDates={weekDates}
                parkData={data[park.id] ?? {}}
                today={today}
                openRideCount={rideCounts?.[park.id]}
                coastersOnly={coastersOnly}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}