import { Flex } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { EmptyState, ErrorState, LoadingState } from '../StateKit';

export const sampleMeta: SampleMeta = {
  id: 'state-kit-base',
  componentId: 'state-kit',
  title: 'State Kit',
  description: '빈 상태, 오류, 로딩 스켈레톤을 화면별로 같은 규칙으로 배치하는 공통 상태 키트입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 35,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <EmptyState
        title="아직 게시글이 없습니다."
        description="첫 글을 등록하면 목록과 상세 패널에서 바로 확인할 수 있습니다."
        actionLabel="게시글 작성"
      />
      <ErrorState message="저장된 Plan 목록을 불러오지 못했습니다." />
      <LoadingState variant="list" rows={3} />
    </Flex>
  );
}
