import { Flex } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { EmptyIllustrationCard } from '../EmptyIllustrationCard';

export const sampleMeta: SampleMeta = {
  id: 'empty-illustration-card-base',
  componentId: 'empty-illustration-card',
  title: 'Empty Illustration Card',
  description: '일러스트 영역과 제목, 설명, CTA를 함께 배치하는 empty 상태 카드입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 38,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <EmptyIllustrationCard
        eyebrow="No content"
        title="아직 등록된 자동화 작업이 없습니다."
        description="새 작업을 추가하면 우선순위와 진행 상태를 이 카드에서 바로 안내할 수 있습니다."
        ctaLabel="작업 등록"
      />
      <EmptyIllustrationCard
        variant="compact"
        title="검색 결과가 없습니다."
        description="필터를 조정하거나 다른 키워드로 다시 찾아보세요."
        ctaLabel="필터 초기화"
      />
    </Flex>
  );
}