マッチカードMatchCardExperimental

import * as React from "react";
import { Badge, Button, CompanyCell, MatchCard, Toast, type MatchFactor } from "@gunjo/ui";

const factors: MatchFactor[] = [
  { label: "対象事業者", value: "◎", tone: "success", detail: "製造業・中小企業" },
  { label: "設備投資要件", value: "△", tone: "warning", detail: "見積追加が必要" },
  { label: "補助率", value: "2/3", tone: "success", detail: "上限 1,250万円" },
];

export function SubsidyMatch() {
  const rootRef = React.useRef<HTMLDivElement | null>(null);
  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
  const [toastMessage, setToastMessage] = React.useState<string | null>(null);

  React.useEffect(() => {
    setPortalContainer(rootRef.current?.closest<HTMLElement>("[data-doc-component-preview-surface]") ?? rootRef.current);
  }, []);

  return (
    <div ref={rootRef} className="relative flex w-full max-w-2xl flex-col gap-4">
      {toastMessage ? (
        <div className="pointer-events-none absolute right-3 top-3 z-[100] w-[min(340px,calc(100%-1.5rem))]">
          <Toast
            message={toastMessage}
            type="success"
            isVisible
            onClose={() => setToastMessage(null)}
            placement="inline"
            closeLabel="閉じる"
            tooltipPortalContainer={portalContainer}
          />
        </div>
      ) : null}
      <MatchCard
        label="補助金適合カード"
        left={<CompanyCell name="協栄精密工業" secondary="製造業・愛知" />}
        right={<CompanyCell name="ものづくり補助金" secondary="設備投資・上限1,250万円" />}
        score={<Badge variant="secondary">92%</Badge>}
        factorsLabel="適合の内訳"
        factors={factors}
        actions={<Button size="sm" onClick={() => setToastMessage("申請準備を開始しました。")}>申請を準備する</Button>}
      />
    </div>
  );
}