import type { ChatMessagePart } from "../../types";

import "./SourcePart.scss";

interface SourcePartProps {
  part: Extract<ChatMessagePart, { type: "source-url" | "source-document" }>;
}

export default function SourcePart({ part }: SourcePartProps) {
  if (part.type === "source-url") {
    return (
      <a
        href={part.url}
        className="chat-message-part-source"
        target="_blank"
        rel="noopener"
      >
        <span className="chat-message-part-source-icon" />
        <span className="chat-message-part-source-title">{part.title}</span>
      </a>
    );
  }

  return (
    <div className="chat-message-part-source">
      <span className="chat-message-part-source-icon" />
      <div className="chat-message-part-source-content">
        <span className="chat-message-part-source-title">{part.title}</span>
        {part.excerpt && (
          <span className="chat-message-part-source-excerpt">
            {part.excerpt}
          </span>
        )}
        {part.url && !part.excerpt && (
          <a
            href={part.url}
            className="chat-message-part-source-link"
            target="_blank"
            rel="noopener"
          >
            {part.url}
          </a>
        )}
        {part.url && part.excerpt && (
          <a
            href={part.url}
            className="chat-message-part-source-link"
            target="_blank"
            rel="noopener"
          >
            View source
          </a>
        )}
      </div>
    </div>
  );
}