'use client';

import {Markdown} from '@astryxdesign/core/Markdown';
import {Heading} from '@astryxdesign/core/Text';

export function SummaryCard({
  title,
  summary,
  isStreaming,
}: {
  title?: string;
  summary: string;
  isStreaming?: boolean;
}) {
  return (
    <div className="rounded-xl border border-border bg-card p-4 sm:p-5 shadow-sm space-y-3">
      {title ? (
        <Heading level={3} className="text-base font-semibold text-primary">
          {title}
        </Heading>
      ) : null}
      <div className="text-sm text-primary leading-relaxed">
        <Markdown density="compact" isStreaming={isStreaming} headingLevelStart={4}>
          {summary}
        </Markdown>
      </div>
    </div>
  );
}