import { ExportOutlined, LinkOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { openChatExternalLink } from './linkNavigation';
import type { ChatMessagePart } from './types';

export function ChatLinkCardPreview({
  target,
  onOpen,
}: {
  target: Extract<ChatMessagePart, { type: 'link_card' }>;
  onOpen?: () => void;
}) {
  return (
    <section className="app-chat-preview-card app-chat-preview-card--link-card">
      <div className="app-chat-preview-card__header">
        <div className="app-chat-preview-card__meta">
          <span className="app-chat-preview-card__glyph app-chat-preview-card__glyph--ranked-link" aria-hidden="true">
            <LinkOutlined />
          </span>
          <div className="app-chat-preview-card__titles">
            <span className="app-chat-preview-card__label">{target.title}</span>
            <span className="app-chat-preview-card__kind">link card</span>
          </div>
        </div>
        <div className="app-chat-preview-card__actions">
          <Button
            type="link"
            size="small"
            className="app-chat-preview-card__open-link"
            icon={<ExportOutlined />}
            onClick={(event) => {
              onOpen?.();
              void openChatExternalLink(target.url, event);
            }}
          >
            {target.actionLabel?.trim() || '열기'}
          </Button>
        </div>
      </div>
      <div className="app-chat-preview-card__body app-chat-preview-card__body--ranked-link">
        <a
          className="app-chat-preview-card__ranked-link-anchor"
          href={target.url}
          target="_blank"
          rel="noreferrer noopener"
          onClick={(event) => {
            onOpen?.();
            openChatExternalLink(target.url, event);
          }}
        >
          {target.url}
        </a>
      </div>
    </section>
  );
}
