import { Card, Flex, Typography } from 'antd';
import { DashboardReportCardWidget } from '../../widgets/dashboard-report-card/DashboardReportCardWidget';
import {
  wmsInboundOutboundCardPreset,
  wmsInventoryTrendCardPreset,
} from '../../data/dashboard-report-presets';

const { Paragraph, Title } = Typography;

export function WmsDashboardFeatureSamples() {
  return (
    <Card className="feature-dashboard-card" bordered={false}>
      <Title level={4}>WMS Dashboard Feature</Title>
      <Paragraph type="secondary">
        프로젝트에서 사용하는 WMS 전용 샘플입니다. 입출고 진행 현황과 재고 추이를 함께
        확인할 수 있습니다.
      </Paragraph>

      <Flex gap={16} wrap className="feature-dashboard-card__grid">
        <div className="feature-dashboard-card__item">
          <DashboardReportCardWidget {...wmsInboundOutboundCardPreset} />
        </div>
        <div className="feature-dashboard-card__item">
          <DashboardReportCardWidget {...wmsInventoryTrendCardPreset} />
        </div>
      </Flex>
    </Card>
  );
}
