import { Card, Flex, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { EmbeddedMapUI } from '../EmbeddedMapUI';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'embedded-map-ui',
  componentId: 'embedded-map-ui',
  title: 'Embedded Map UI',
  description: '앱 내부에 지도를 직접 내장해 모바일과 데스크톱에서 같은 위치 정보를 바로 보여주는 컴포넌트입니다.',
  category: 'Display',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 70,
  features: ['docs'],
};

export function Sample() {
  return (
    <Card title="Embedded Map UI Sample" extra={<Text code>components/embeddedMap</Text>}>
      <Paragraph>
        배송지나 현장 위치를 상세 화면 안에서 바로 보여줄 수 있도록 iframe 기반 지도를 제공합니다.
        모바일에서는 세로로 자연스럽게 줄고, 외부 지도 열기 링크도 함께 제공합니다.
      </Paragraph>

      <Flex vertical gap={20}>
        <EmbeddedMapUI
          title="서울역 출발 허브"
          address="서울 중구 한강대로 405"
          description="출발 허브와 주변 도로 상태를 앱 안에서 바로 확인하는 예시입니다."
          latitude={37.55472}
          longitude={126.97083}
          zoom={15}
          height={320}
          markerLabel="출발"
        />

        <EmbeddedMapUI
          title="모바일 배송지 확인"
          address="서울 강남구 테헤란로 521"
          description="상세 카드 안에서 바로 열어 기사나 운영자가 휴대폰에서도 위치를 확인할 수 있습니다."
          latitude={37.50632}
          longitude={127.05323}
          zoom={16}
          height={280}
          markerLabel="도착"
        />
      </Flex>
    </Card>
  );
}
