import { Flex, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { ChatLinkCardPreview } from '../../../app/main/mainChatPanel/ChatLinkCardPreview';

const { Paragraph } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'chat-link-card-preview',
  componentId: 'chat-link-card-preview',
  title: 'Chat Link Card Preview',
  description: '채팅 응답에서 `[[link-card:...]]` 문법으로 렌더되는 외부 링크 카드 프리뷰 샘플입니다.',
  category: 'Chat',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 94,
  features: ['docs'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Paragraph>
        외부 공개 링크를 카드 형태로 보여줄 때 사용하는 프리뷰입니다. 제목, 액션 라벨, 실제 이동 URL이 한 번에 보이도록
        구성했습니다.
      </Paragraph>
      <ChatLinkCardPreview
        target={{
          type: 'link_card',
          title: '업무용 모바일 시안 미리보기',
          url: 'https://preview.sm-home.cloud/chat/live?sample=card-preview',
          actionLabel: '미리보기 열기',
        }}
      />
      <ChatLinkCardPreview
        target={{
          type: 'link_card',
          title: '배포 체크리스트 문서',
          url: 'https://test.sm-home.cloud/docs/release-checklist',
          actionLabel: '문서 열기',
        }}
      />
    </Flex>
  );
}
