import type { ParentTimelineItem } from "@/../../packages/types/src";

export function ParentOverview({
  timeline,
}: {
  timeline: ParentTimelineItem[];
}) {
  return (
    <section>
      <div className="parent-summary-grid">
        <article className="summary-card">
          <span className="label">Child attendance</span>
          <strong>96%</strong>
          <small>On track this month</small>
        </article>
        <article className="summary-card">
          <span className="label">Upcoming events</span>
          <strong>3</strong>
          <small>School trip, workshop, and family day</small>
        </article>
        <article className="summary-card">
          <span className="label">Billing status</span>
          <strong>Paid</strong>
          <small>Next invoice due Aug 30</small>
        </article>
      </div>

      <div className="section-header">
        <h2>Latest updates</h2>
        <button type="button">View all</button>
      </div>

      <div className="timeline">
        {timeline.map((item) => (
          <article key={`${item.title}-${item.time}`} className="timeline-item">
            <div className={`timeline-bullet ${item.type}`} />
            <div>
              <h3>{item.title}</h3>
              <span>{item.time}</span>
              <p>{item.detail}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}