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

const { Text } = Typography;

const orderSteps = [
  { key: 'draft', label: '초안', description: '요청 초안을 등록하고 범위를 정리합니다.' },
  { key: 'review', label: '검토', description: '의존성과 화면 반영 범위를 확인합니다.' },
  { key: 'build', label: '구현', description: '컴포넌트와 샘플, 문서를 함께 작성합니다.' },
  { key: 'verify', label: '확인', description: '빌드와 화면 구성을 점검합니다.' },
  { key: 'done', label: '완료', description: 'release 반영 대기 상태로 넘깁니다.' },
];

const supportSteps = [
  { key: 'ticket', label: '접수', status: 'complete' as const },
  { key: 'assign', label: '담당 지정', status: 'complete' as const },
  { key: 'fix', label: '수정중', status: 'current' as const },
  { key: 'deploy', label: '배포 대기', status: 'pending' as const },
];

export const sampleMeta: SampleMeta = {
  id: 'stepper-base',
  componentId: 'stepper',
  title: 'Stepper',
  description: '단계 진행 상태를 가로 또는 세로 흐름으로 표현하는 stepper 컴포넌트입니다.',
  category: 'Navigation',
  kind: 'base',
  variantLabel: 'Base',
  order: 64,
  features: ['docs'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Card size="small" title="기본 Stepper">
        <StepperUI steps={orderSteps} currentStepKey="build" />
      </Card>

      <Card size="small" title="Compact Vertical Stepper">
        <Flex vertical gap={10}>
          <Text type="secondary">
            운영 상태처럼 짧은 단계를 좁은 폭에 배치할 때는 세로 모드가 읽기 쉽습니다.
          </Text>
          <StepperUI
            steps={supportSteps}
            direction="vertical"
            compact
            statusLabels={{
              complete: '완료',
              current: '진행중',
              failed: '실패',
              pending: '대기',
            }}
          />
        </Flex>
      </Card>
    </Flex>
  );
}
