import type { SampleMeta } from '../../../../widgets/core';
import { plugins } from '../../../../types/component-plugin';
import { MultiProgressUI } from '../MultiProgressUI';
import {
  createMultiProgressMetaPlugin,
  createMultiProgressSortPlugin,
} from '../plugins';
import type { MultiProgressUIProps } from '../types';

export const sampleMeta: SampleMeta = {
  id: 'dashboard-multi-progress',
  componentId: 'dashboard-multi-progress',
  title: 'Dashboard Multi Progress',
  description: '여러 상태 비중을 하나의 bar와 범례로 표현하는 대시보드 컴포넌트입니다.',
  category: 'Components',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 11,
  features: ['docs'],
};

export function Sample() {
  const props = plugins<MultiProgressUIProps>(
    {
      label: '배송 상태 비중',
      data: [
        { label: '배송 완료', percent: 54, color: '#28c76f' },
        { label: '배송 중', percent: 28, color: '#00cfe8' },
        { label: '지연', percent: 18, color: '#ea5455' },
      ],
    },
    [createMultiProgressMetaPlugin('오늘 기준'), createMultiProgressSortPlugin()],
  );

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