import React, { useState } from "react";
import { createRoot } from "react-dom/client";

const cards = [
  { icon: "☀", title: "去看一场日落", detail: "找一个视野开阔的地方，留半小时给天空。" },
  { icon: "✎", title: "写下三个小确幸", detail: "记录今天让你嘴角上扬的三个瞬间。" },
  { icon: "♧", title: "散步到一条新街", detail: "不设目的地，走进一条以前没有去过的小路。" },
];

function App() {
  const [card, setCard] = useState(cards[0]);
  const draw = () => setCard(cards[(cards.indexOf(card) + 1) % cards.length]);
  return <main className="page">
    <header><span>WEEKEND NOTE</span><b>VOL. 01</b></header>
    <section className="intro"><small>A LITTLE PLAN FOR TODAY</small><h1>今天，给自己<br /><em>一点小期待。</em></h1></section>
    <article><div className="icon">{card.icon}</div><p>YOUR WEEKEND NOTE</p><h2>{card.title}</h2><div className="rule" /><span>{card.detail}</span></article>
    <button onClick={draw}>换一张灵感 <b>↗</b></button>
    <footer>慢一点，也很好。</footer>
  </main>;
}

createRoot(document.getElementById("root")).render(<App />);