import type { SampleMeta } from '../../../../widgets/core';
import { plugins } from '../../../../types/component-plugin';
import { ProgressUI } from '../ProgressUI';
import { createProgressColorPlugin, createProgressMetaPlugin } from '../plugins';
import type { ProgressUIProps } from '../types';

export const sampleMeta: SampleMeta = {
  id: 'dashboard-progress',
  componentId: 'dashboard-progress',
  title: 'Dashboard Progress',
  description: '라벨, 메타, 진행률을 함께 표현하는 대시보드 progress 컴포넌트입니다.',
  category: 'Components',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 10,
  features: ['docs'],
};

export function Sample() {
  const props = plugins<ProgressUIProps>(
    {
      label: '배송 완료',
      data: {
        percent: 72,
        color: '#28c76f',
      },
    },
    [createProgressMetaPlugin('오늘 기준'), createProgressColorPlugin('#165dff')],
  );

  return <ProgressUI {...props} />;
}
