SixFlagsSuperCalendar/components/ParkCard.tsx

import Link from "next/link";
import type { Park } from "@/lib/scrapers/types";
import type { DayData } from "@/lib/db";

interface ParkCardProps {
  park: Park;
  weekDates: string[]; // 7 dates YYYY-MM-DD
  parkData: Record<string, DayData>;
  today: string;
}

const DOW_SHORT = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

function parseDate(iso: string) {
  const d = new Date(iso + "T00:00:00");
  return { day: d.getDate(), dow: d.getDay(), isWeekend: d.getDay() === 0 || d.getDay() === 6 };
}

export function ParkCard({ park, weekDates, parkData, today }: ParkCardProps) {
  return (
    <div
      data-park={park.name.toLowerCase()}
      style={{
        background: "var(--color-surface)",
        border: "1px solid var(--color-border)",
        borderRadius: 12,
        padding: "14px 14px 12px",
        display: "flex",
        flexDirection: "column",
        gap: 10,
      }}
    >
      {/* Park name + location */}
      <div>
        <Link href={`/park/${park.id}`} className="park-name-link">
          <span style={{ fontWeight: 600, fontSize: "0.9rem", lineHeight: 1.2 }}>
            {park.name}
          </span>
        </Link>
        <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
          {park.location.city}, {park.location.state}
        </div>
      </div>

      {/* 7-day grid */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(7, 1fr)",
        gap: 4,
      }}>
        {weekDates.map((date) => {
          const pd = parseDate(date);
          const isToday = date === today;
          const dayData = parkData[date];
          const isOpen = dayData?.isOpen && dayData?.hoursLabel;
          const isPH = dayData?.specialType === "passholder_preview";

          let cellBg = "transparent";
          let cellBorder = "1px solid var(--color-border-subtle)";
          let cellBorderRadius = "6px";

          if (isToday) {
            cellBg = "var(--color-today-bg)";
            cellBorder = `1px solid var(--color-today-border)`;
          } else if (pd.isWeekend) {
            cellBg = "var(--color-weekend-header)";
          }

          return (
            <div key={date} style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 3,
              padding: "6px 2px",
              background: cellBg,
              border: cellBorder,
              borderRadius: cellBorderRadius,
              minWidth: 0,
            }}>
              {/* Day name */}
              <span style={{
                fontSize: "0.6rem",
                textTransform: "uppercase",
                letterSpacing: "0.04em",
                color: isToday ? "var(--color-today-text)" : pd.isWeekend ? "var(--color-text-secondary)" : "var(--color-text-muted)",
                fontWeight: isToday || pd.isWeekend ? 600 : 400,
              }}>
                {DOW_SHORT[pd.dow]}
              </span>

              {/* Date number */}
              <span style={{
                fontSize: "0.8rem",
                fontWeight: isToday ? 700 : 500,
                color: isToday ? "var(--color-today-text)" : pd.isWeekend ? "var(--color-text)" : "var(--color-text-secondary)",
                lineHeight: 1,
              }}>
                {pd.day}
              </span>

              {/* Status */}
              {!dayData ? (
                <span style={{ fontSize: "0.65rem", color: "var(--color-text-dim)", lineHeight: 1 }}>—</span>
              ) : isPH && isOpen ? (
                <span style={{
                  fontSize: "0.6rem",
                  fontWeight: 700,
                  color: "var(--color-ph-label)",
                  letterSpacing: "0.02em",
                  textAlign: "center",
                  lineHeight: 1.2,
                }}>
                  PH
                </span>
              ) : isOpen ? (
                <span style={{
                  fontSize: "0.58rem",
                  fontWeight: 600,
                  color: "var(--color-open-text)",
                  lineHeight: 1,
                  textAlign: "center",
                }}>
                  Open
                </span>
              ) : (
                <span style={{ fontSize: "0.9rem", color: "var(--color-text-dim)", lineHeight: 1 }}>·</span>
              )}
            </div>
          );
        })}
      </div>

      {/* Hours detail row — show the open day hours inline */}
      {weekDates.some((d) => parkData[d]?.isOpen && parkData[d]?.hoursLabel) && (
        <div style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "4px 12px",
          paddingTop: 4,
          borderTop: "1px solid var(--color-border-subtle)",
        }}>
          {weekDates.map((date) => {
            const pd = parseDate(date);
            const dayData = parkData[date];
            if (!dayData?.isOpen || !dayData?.hoursLabel) return null;
            const isPH = dayData.specialType === "passholder_preview";
            return (
              <span key={date} style={{
                fontSize: "0.68rem",
                color: isPH ? "var(--color-ph-hours)" : "var(--color-open-hours)",
                display: "flex",
                gap: 4,
                alignItems: "center",
              }}>
                <span style={{ color: "var(--color-text-muted)", fontWeight: 600 }}>
                  {DOW_SHORT[pd.dow]}
                </span>
                {dayData.hoursLabel}
                {isPH && (
                  <span style={{ color: "var(--color-ph-label)", fontSize: "0.6rem", fontWeight: 700 }}>PH</span>
                )}
              </span>
            );
          })}
        </div>
      )}
    </div>
  );
}