Day separators and system notes

import { LuHash, LuPencil, LuPin, LuUserPlus } from "react-icons/lu";
import { Avatar, DateSeparator, MessageBubble, SystemMessage } from "@nexera-ui/react";

/** Day separators and system notes: a channel history where each day starts with a label and joins are noted. */
export default function DaySeparatorsAndSystemNotes() {
  const avatar = (initials: string) => <Avatar size="md" initials={initials} isDecorative />;
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section
        aria-labelledby="channel-title"
        className="mx-auto grid w-full max-w-2xl gap-3 rounded-xl border border-default bg-surface p-4 shadow-sm @3xl:p-6"
      >
        <header className="flex items-center gap-2 border-b border-default pb-3">
          <LuHash aria-hidden="true" className="size-5 text-muted" />
          <div className="grid">
            <h2 id="channel-title" className="text-heading-h4 text-primary">
              october-joiners
            </h2>
            <p className="text-body-small text-secondary">
              Onboarding for people starting in October · 9 members
            </p>
          </div>
        </header>
        <div role="log" aria-label="Channel history" className="flex flex-col gap-1.5">
          <DateSeparator label="Monday, 12 October" dateTime="2026-10-12" />
          <SystemMessage icon={<LuUserPlus />}>
            Yuki Tanaka created the channel and added 6 people
          </SystemMessage>
          <MessageBubble
            name="Yuki Tanaka"
            avatar={avatar("YT")}
            time="09:02"
            dateTime="2026-10-12T09:02"
          >
            Welcome to Northwind! Your laptop pickup is at reception from 10:00.
          </MessageBubble>
          <MessageBubble
            name="Yuki Tanaka"
            avatar={avatar("YT")}
            group="continued"
            time="09:03"
            dateTime="2026-10-12T09:03"
          >
            Bring a photo ID. The IT desk will set up your accounts on the spot.
          </MessageBubble>

          <DateSeparator label="Yesterday" dateTime="2026-10-13" />
          <SystemMessage icon={<LuUserPlus />}>Hina Raza joined the channel</SystemMessage>
          <SystemMessage icon={<LuUserPlus />}>Daniel Costa joined the channel</SystemMessage>
          <MessageBubble
            name="Hina Raza"
            avatar={avatar("HR")}
            time="11:47"
            dateTime="2026-10-13T11:47"
          >
            Hi all, Hina from Finance here. Does anyone know where the buddy lunch is on Thursday?
          </MessageBubble>
          <MessageBubble
            direction="outgoing"
            name="Sara Malik"
            time="11:52"
            dateTime="2026-10-13T11:52"
            status="read"
          >
            The Atrium on floor 2, at 12:30. I will meet you at the lifts.
          </MessageBubble>

          <DateSeparator label="Today" dateTime="2026-10-14" />
          <SystemMessage icon={<LuPencil />}>
            Sara Malik renamed the channel from #new-joiners to #october-joiners
          </SystemMessage>
          <SystemMessage icon={<LuPin />}>Sara Malik pinned “Week 1 schedule.pdf”</SystemMessage>
          <MessageBubble
            name="Daniel Costa"
            avatar={avatar("DC")}
            time="08:15"
            dateTime="2026-10-14T08:15"
          >
            Thanks for the schedule. See you at the town hall at 15:00!
          </MessageBubble>
        </div>
      </section>
    </div>
  );
}