Problems panel

import {
  Alert,
  AlertDescription,
  AlertTitle,
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@paxeer/core";

export interface ProblemRow {
  id: string;
  severity: "error" | "warning";
  message: string;
  path: string;
}

export function ProblemsPanel({
  items = [
    {
      id: "p1",
      severity: "error",
      message: "Cannot find name 'seedColor'.",
      path: "apps/demo/src/components/showcase.tsx:18",
    },
    {
      id: "p2",
      severity: "warning",
      message: "React Hook useMemo has a missing dependency.",
      path: "packs/ide/src/command-palette.tsx:41",
    },
  ],
}: {
  items?: ProblemRow[];
}) {
  const errors = items.filter((item) => item.severity === "error").length;

  return (
    <Card className="gap-3 py-4" data-slot="problems-panel">
      <CardHeader className="px-4">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Problems
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-3 px-4">
        {errors > 0 ? (
          <Alert variant="destructive">
            <AlertTitle>{errors} error{errors === 1 ? "" : "s"} in the workspace</AlertTitle>
            <AlertDescription>Fix these before shipping a registry build.</AlertDescription>
          </Alert>
        ) : null}
        {items.length === 0 ? (
          <Empty className="p-6">
            <EmptyHeader>
              <EmptyTitle>No problems</EmptyTitle>
              <EmptyDescription>The current workspace is clean.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Severity</TableHead>
                <TableHead>Message</TableHead>
                <TableHead>Path</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>
                    <Badge variant={item.severity === "error" ? "destructive" : "tertiary"}>
                      {item.severity}
                    </Badge>
                  </TableCell>
                  <TableCell className="whitespace-normal">{item.message}</TableCell>
                  <TableCell className="font-[family-name:var(--md-ref-typeface-mono)] text-on-surface-variant">
                    {item.path}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  );
}