Compare pane

import { Card, CardContent, CardHeader, CardTitle, Separator } from "@paxeer/core";

export function ComparePane({
  left = {
    title: "designx-fast",
    body: "Closest bid is 2478.10 for 4.2 ETH. Draft 1.50 @ 2480.40 GTC.",
  },
  right = {
    title: "designx-reason",
    body: "Two bids under 2479. Stay inside the clip; wait for sentry-risk before sending.",
  },
}: {
  left?: { title: string; body: string };
  right?: { title: string; body: string };
}) {
  return (
    <div data-slot="compare-pane" className="grid gap-3 md:grid-cols-[1fr_auto_1fr] md:items-stretch">
      <Card className="gap-3 py-4">
        <CardHeader className="px-4">
          <CardTitle className="font-[family-name:var(--md-ref-typeface-mono)] text-[length:var(--md-sys-typescale-label-large-size)]">
            {left.title}
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 text-[length:var(--md-sys-typescale-body-small-size)] text-on-surface-variant">
          {left.body}
        </CardContent>
      </Card>
      <Separator orientation="vertical" className="hidden md:block" />
      <Card className="gap-3 py-4">
        <CardHeader className="px-4">
          <CardTitle className="font-[family-name:var(--md-ref-typeface-mono)] text-[length:var(--md-sys-typescale-label-large-size)]">
            {right.title}
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 text-[length:var(--md-sys-typescale-body-small-size)] text-on-surface-variant">
          {right.body}
        </CardContent>
      </Card>
    </div>
  );
}