import * as React from "react";

interface CitationBlockProps {
  source: string;
  detail: string;
  date?: string;
}

export function CitationBlock({ source, detail, date }: CitationBlockProps) {
  return (
    <div className="border-l-2 border-gold pl-4 py-2 my-4 bg-white/50">
      <p className="font-sans text-sm italic text-ink">&ldquo;{detail}&rdquo;</p>
      <div className="flex items-center space-x-2 mt-2 text-xs font-mono text-muted-foreground">
        <span className="font-semibold text-navy">{source}</span>
        {date && (
          <>
            <span>•</span>
            <span>{date}</span>
          </>
        )}
      </div>
    </div>
  );
}