import { SourceAttribution } from "~/components/SourceAttribution";
import { formatWhen } from "~/lib/format";

import styles from "~/routes/[handle].module.css";

interface AnswerBlockProps {
  content: string;
  createdAt: Date | string;
  sourceType?: string | null;
  sourceUri?: string | null;
  sourceData?: string | null;
}

export function AnswerBlock(props: AnswerBlockProps) {
  return (
    <div class={styles.answerBlock}>
      <div class={styles.answerLabel}>Answer</div>
      <div class={styles.answerText}>{props.content}</div>
      <div class={styles.questionMeta}>
        {formatWhen(props.createdAt)}
        <SourceAttribution
          sourceType={props.sourceType || "askimut"}
          sourceUri={props.sourceUri}
          sourceData={props.sourceData}
        />
      </div>
    </div>
  );
}

export default AnswerBlock;