ロイヤリティ要約カードLoyaltySummaryCardExperimental

import * as React from "react";
import {
  Badge,
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  LoyaltySummaryCard,
} from "@gunjo/ui";

export function MemberSummary() {
  const rootRef = React.useRef<HTMLDivElement | null>(null);
  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
  const [barcodeOpen, setBarcodeOpen] = React.useState(false);

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

  return (
    <div ref={rootRef} className="flex w-full max-w-md flex-col gap-4">
      <LoyaltySummaryCard
        tone="brand"
        meta="ハッピーズドラッグ メンバーズ"
        tier={<Badge variant="outline" className="border-primary-strong-foreground/45 text-primary-strong-foreground">ゴールド会員</Badge>}
        balanceLabel="ポイント残高"
        balance="3,480"
        unit="P"
        secondary={[{ label: "当年購入額", value: "¥86,200" }, { label: "クーポン", value: "3枚" }]}
        progress={{ value: 86200, max: 100000, label: "プラチナ会員まで あと ¥13,800", caption: "¥86,200 / ¥100,000" }}
        alert="200 P が 2026/06/30 に失効予定です"
        action={<Button size="lg" variant="secondary" className="w-full" onClick={() => setBarcodeOpen(true)}>会員バーコードを表示</Button>}
      />
      <Dialog open={barcodeOpen} onOpenChange={setBarcodeOpen} modal={false}>
        <DialogContent portalContainer={portalContainer} overlayClassName="rounded-md" closeLabel="閉じる" className="max-w-sm">
          <DialogHeader>
            <DialogTitle>会員バーコード</DialogTitle>
            <DialogDescription>レジでこのコードを提示します。</DialogDescription>
          </DialogHeader>
          <div className="grid gap-3 rounded-lg border bg-card p-4 text-center">
            <p className="text-sm font-medium text-foreground">ハッピーズドラッグ メンバーズ</p>
            <div className="mx-auto h-24 w-full max-w-[260px] rounded bg-[repeating-linear-gradient(90deg,hsl(var(--foreground))_0_2px,transparent_2px_4px,hsl(var(--foreground))_4px_7px,transparent_7px_10px,hsl(var(--foreground))_10px_11px,transparent_11px_14px)]" />
            <p className="font-mono text-sm tracking-widest text-foreground">3480 0626 2026</p>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setBarcodeOpen(false)}>閉じる</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}