frontend/src/components/layout/ModulePanel.tsx

import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import type { DashboardModule } from "@/modules/registry"

export function ModulePanel({
  module,
  style,
  className,
}: {
  module: DashboardModule
  style?: React.CSSProperties
  className?: string
}) {
  const { icon: Icon, Panel } = module
  return (
    <Card id={module.id} className={cn("reveal scroll-mt-24", className)} style={style}>
      <CardHeader className="border-b border-border/60">
        <div className="flex items-center gap-2.5">
          <span className="flex size-7 items-center justify-center rounded-md border border-border bg-white/5 text-muted-foreground">
            <Icon className="size-3.5" />
          </span>
          <div className="leading-tight">
            <div className="font-mono text-[0.625rem] uppercase tracking-[0.18em] text-muted-foreground">
              {module.eyebrow}
            </div>
            <h2 className="font-display text-sm font-semibold tracking-tight text-foreground">
              {module.title}
            </h2>
          </div>
        </div>
        <span className="font-mono text-xs tabular-nums text-muted-foreground/50">
          {module.index}
        </span>
      </CardHeader>
      <CardContent className="pt-4">
        <Panel />
      </CardContent>
    </Card>
  )
}