Header Board

"use client";

import { useState } from "react";
import { CalendarDays, LayoutGrid, List, Share2, SlidersHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderBoardProps {
  emoji?: string;
  title?: string;
  description?: string;
  members?: { name: string; emoji: string }[];
  defaultView?: "board" | "list" | "week";
  onViewChange?: (v: "board" | "list" | "week") => void;
  className?: string;
}

/** Board page header: big emoji tile, title and description, member emoji avatars with a share pill, then a pill view switcher (Board, List, Week) and a filter button. */
export function HeaderBoard({
  emoji = "🚀",
  title = "Website relaunch",
  description = "New homepage, pricing page and blog templates · due Oct 24",
  members = [
    { name: "Ana", emoji: "🦊" },
    { name: "Tom", emoji: "🐻" },
    { name: "Mei", emoji: "🐼" },
  ],
  defaultView = "board",
  onViewChange,
  className,
}: HeaderBoardProps) {
  const [view, setView] = useState(defaultView);
  const views = [
    { v: "board", l: "Board", Icon: LayoutGrid },
    { v: "list", l: "List", Icon: List },
    { v: "week", l: "Week", Icon: CalendarDays },
  ] as const;
  return (
    <header className={cn("bg-da-bg px-4 pt-6 pb-4 text-da-fg sm:px-8", className)}>
      <div className="flex flex-wrap items-start gap-4">
        <span aria-hidden className="grid size-14 shrink-0 place-items-center rounded-da-lg bg-da-primary/12 text-3xl">
          {emoji}
        </span>
        <div className="min-w-[12rem] flex-1">
          <h1 className="font-da-display text-3xl font-extrabold tracking-da-display">{title}</h1>
          <p className="mt-0.5 text-da-muted-fg">{description}</p>
        </div>
        <div className="flex items-center gap-2">
          <ul className="flex -space-x-2" aria-label={`${members.length} members`}>
            {members.map((m, i) => (
              <li
                key={m.name}
                title={m.name}
                className={cn(
                  "grid size-10 place-items-center rounded-full text-lg ring-3 ring-da-bg",
                  ["bg-da-accent", "bg-da-secondary", "bg-da-primary/20"][i % 3],
                )}
              >
                <span aria-hidden>{m.emoji}</span>
                <span className="sr-only">{m.name}</span>
              </li>
            ))}
          </ul>
          <a
            href="#share"
            className="da-focus da-transition inline-flex h-10 items-center gap-1.5 rounded-da-pill bg-da-fg px-4 text-sm font-semibold text-da-bg hover:-translate-y-0.5"
          >
            <Share2 aria-hidden className="size-4" /> Share
          </a>
        </div>
      </div>
      <div className="mt-6 flex items-center justify-between gap-3">
        <div role="group" aria-label="View" className="inline-flex rounded-da-pill bg-da-surface-2 p-1">
          {views.map(({ v, l, Icon }) => (
            <button
              key={v}
              type="button"
              aria-pressed={view === v}
              onClick={() => {
                setView(v);
                onViewChange?.(v);
              }}
              className={cn(
                "da-focus da-transition inline-flex h-10 items-center gap-2 rounded-da-pill px-4 text-sm font-semibold",
                view === v ? "bg-da-surface shadow-da-sm" : "text-da-muted-fg",
              )}
            >
              <Icon aria-hidden className="size-4" />
              {l}
            </button>
          ))}
        </div>
        <button type="button" className="da-focus inline-flex h-10 items-center gap-2 rounded-da-pill bg-da-surface px-4 text-sm font-semibold shadow-da-sm">
          <SlidersHorizontal aria-hidden className="size-4" />
          <span className="max-sm:sr-only">Filter</span>
        </button>
      </div>
    </header>
  );
}

export default HeaderBoard;