import { useId } from "react";
import type { UiModuleBlock } from "../../types";
import { IconGlyph } from "../foundation/IconGlyph";

export interface ModuleCardProps {
  module: UiModuleBlock;
}

export function ModuleCard({ module }: ModuleCardProps) {
  const generatedId = useId();
  const titleId = `${generatedId}-title`;
  const ariaLabel = module.title ? undefined : module.label || module.id;

  return (
    <aside
      className="module-card"
      data-severity={module.severity || "neutral"}
      data-model-id={module.id}
      aria-labelledby={module.title ? titleId : undefined}
      aria-label={ariaLabel}
    >
      <div>
        {module.title ? <h2 id={titleId}>{module.title}</h2> : null}
        {module.value ? <strong>{module.value}</strong> : null}
        {module.detail || module.label ? (
          <p>{module.detail || module.label}</p>
        ) : null}
      </div>
      {module.icon ? <IconGlyph name={module.icon} size="lg" /> : null}
    </aside>
  );
}