import * as React from 'react';
import { clsx } from 'clsx';

export interface DiffCardProps extends React.HTMLAttributes<HTMLDivElement> {
  before: React.ReactNode;
  after: React.ReactNode;
  beforeLabel?: string;
  afterLabel?: string;
}

export function DiffCard({
  before,
  after,
  beforeLabel = 'Before',
  afterLabel = 'After',
  className,
  ...props
}: DiffCardProps) {
  return (
    <div className={clsx('grid gap-3 md:grid-cols-2', className)} {...props}>
      <div className="grid gap-2 rounded-md border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-3">
        <strong className="text-sm text-[var(--bl-text-primary)]">{beforeLabel}</strong>
        <div className="whitespace-pre-wrap text-sm text-[var(--bl-text-secondary)]">{before}</div>
      </div>
      <div className="grid gap-2 rounded-md border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-3">
        <strong className="text-sm text-[var(--bl-text-primary)]">{afterLabel}</strong>
        <div className="whitespace-pre-wrap text-sm text-[var(--bl-text-secondary)]">{after}</div>
      </div>
    </div>
  );
}
