import Link from "next/link";

/** The dashboard's one box shape: a micro title, an optional "all →", a body. */
export default function Panel({
  title,
  testid,
  more,
  children,
  className = "",
}: {
  title: string;
  testid: string;
  more?: { href: string; label: string };
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section
      data-panel={testid}
      className={`rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2 ${className}`}
    >
      <div className="mb-1.5 flex items-baseline">
        <h2 className="micro">{title}</h2>
        {more && (
          <Link href={more.href} className="ml-auto text-[11px] text-[var(--color-sel)] hover:underline">
            {more.label}
          </Link>
        )}
      </div>
      {children}
    </section>
  );
}