日ごとの予報の格子

"use client";

import { IconCloud, IconCloudRain } from "@tabler/icons-react";
import { Card, Grid, Icon } from "@gunjo/ui";

const DAYS = [
  { name: "今日", date: "9/19（土）", weekday: 6, icon: IconCloud,
    text: "くもり 時々 雨", min: 21, max: 26,
    pops: [["12-18", 50], ["18-24", 50]] },
  { name: "あす", date: "9/20（日）", weekday: 0, icon: IconCloudRain,
    text: "雨 所により 朝から 雷を伴い 激しく降る", min: 21, max: 24,
    pops: [["0-6", 80], ["6-12", 80], ["12-18", 80], ["18-24", 80]] },
  { name: "月曜", date: "9/21（月）", weekday: 1, icon: IconCloudRain,
    text: "雨", min: 20, max: 28, pops: [] },
] as const;

// 土曜は青、日曜は赤（Calendar と同じトークン）
const tone = (w: number) => (w === 6 ? "text-info" : w === 0 ? "text-destructive" : undefined);

export function ForecastDays() {
  return (
    <Card className="overflow-hidden">
      {/* subgrid で行を3列で共有する＝長い文の列があっても気温の段がそろう */}
      <Grid cols={3} gap={0} className="grid-rows-[auto_auto_auto_auto_auto] divide-x divide-border">
        {DAYS.map((d) => (
          <div key={d.date} className="row-span-5 grid grid-rows-subgrid px-2 py-3 text-center">
            <div className={tone(d.weekday)}>
              <p className="text-sm font-semibold">{d.name}</p>
              <p className="text-xs">{d.date}</p>
            </div>
            <div className="flex justify-center py-2"><Icon icon={d.icon} size="xl" /></div>
            <p className="text-xs">{d.text}</p>
            <p className="mt-2 text-sm tabular-nums">最低 {d.min}° 最高 {d.max}°</p>
            <div className="mt-2 border-t pt-2 text-xs tabular-nums">
              {d.pops.length
                ? d.pops.map(([h, v]) => <span key={h} className="mx-1 inline-block">{h}時 {v}%</span>)
                : "—"}
            </div>
          </div>
        ))}
      </Grid>
    </Card>
  );
}