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

const { Paragraph, Title } = Typography;

export function TmsDashboardFeatureSamples() {
  return (
    <Card className="feature-dashboard-card" bordered={false}>
      <Title level={4}>TMS Dashboard Feature</Title>
      <Paragraph type="secondary">
        프로젝트에서 사용하는 TMS 전용 샘플입니다. 배송 현황과 배송 실적 지표를 함께
        보여줍니다.
      </Paragraph>

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