import { Card } from '#/components/atoms/card.jsx';
import { Handle } from '#/components/molecules/handle.jsx';
import { Prose } from '#/components/molecules/prose.jsx';
import { timeAgo } from '#/lib/format.js';
import { cn } from '#/lib/utils.js';

/**
 * One person's words, drawn the same wherever they are read: an issue
 * thread, a pull request's timeline, a comment on a line.
 *
 * Who said it and when read on a line of their own, and what they said sits
 * under that. A note runs to whatever length its writer gave it, so putting
 * it beside the handle would push the time off a narrow window, and it is
 * markdown, so a code block in a review reads as one.
 *
 * `mark` is what the surface adds beside the handle, because each names a
 * different thing: an issue carries a disposition, a review a verdict.
 * `action` is what can be done about it, and holds the right of the line.
 */
export function StatementCard({ who, at, note, mark, action, className }) {
  return (
    <Card className={cn('px-4 py-3', className)}>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px]">
        <Handle who={who} />
        {mark}
        <span className="text-faint">{timeAgo(at)}</span>
        {action && <span className="ml-auto shrink-0">{action}</span>}
      </div>
      {note && <Prose text={note} className="mt-2.5" />}
    </Card>
  );
}