List

"use client";

import List, { ListItem } from "@/components/ui/list";

const reviewers = [
  {
    name: "Anna Petrova",
    line: "Approved the budget change for the Q4 rollout",
    word: "Approved",
    when: "2h",
  },
  {
    name: "Mark Chen",
    line: "Asked for changes on the migration plan — 2 comments",
    word: "Changes",
    when: "5h",
  },
  {
    name: "Leila Haddad",
    line: "Reading the diff now",
    word: "Reviewing",
    when: "now",
    current: true,
  },
  {
    name: "Tom Oberg",
    line: "Left the team — can no longer review",
    word: "Away",
    when: "—",
    disabled: true,
  },
];

function Initials({ name }: { name: string }) {
  const initials = name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2);
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 32,
        height: 32,
        borderRadius: "9999px",
        background: "#eef6ff",
        color: "#1852b0",
        fontSize: 12,
        fontWeight: 600,
      }}
    >
      {initials}
    </div>
  );
}

export default function ListDemo() {
  return (
    <div
      style={{
        width: "100%",
        maxWidth: 480,
        background: "var(--ggarry-bg-surface)",
        color: "var(--ggarry-text-default)",
        padding: 16,
      }}
    >
      <List
        label="Reviewers"
        count={`${reviewers.length} of ${reviewers.length}`}
      >
        {reviewers.map((who) => (
          <ListItem
            key={who.name}
            title={who.name}
            description={who.line}
            href="#"
            current={who.current}
            disabled={who.disabled}
            leading={<Initials name={who.name} />}
            meta={
              <>
                <span>{who.word}</span>
                <span>{who.when}</span>
              </>
            }
            actions={
              <button type="button" aria-label={`More for ${who.name}`}>
                ⋯
              </button>
            }
          />
        ))}
      </List>
    </div>
  );
}