import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { OPInfoCard } from '../../src/index';

export default {
  title: '组件/通用/OPInfoCard',
  component: OPInfoCard,
} as ComponentMeta<typeof OPInfoCard>;

export const 基础信息卡片: ComponentStory<
  typeof OPInfoCard
> = (): JSX.Element => {
  const data = [
    { label: 'Location name', value: 'Arrival area-01' },
    { label: 'Total parcel number', value: '200' },
    { label: 'Total bag number', value: '50' },
    { label: 'Total pallet number', value: '20' },
    { label: 'Total container number', value: '2' },
    { label: 'Creation time', value: '2025-10-27 11:00:00' },
    { label: 'Creator', value: 'Jack' },
  ];

  return <OPInfoCard data={data} columns={3} />;
};

export const 两列布局: ComponentStory<typeof OPInfoCard> = (): JSX.Element => {
  const data = [
    { label: '位置名称', value: '到达区域-01' },
    { label: '包裹总数', value: '200' },
    { label: '袋子总数', value: '50' },
    { label: '托盘总数', value: '20' },
  ];

  return <OPInfoCard data={data} columns={2} />;
};

export const 四列布局: ComponentStory<typeof OPInfoCard> = (): JSX.Element => {
  const data = [
    { label: '订单号', value: 'SO202601080001' },
    { label: '客户名称', value: '菜鸟网络' },
    { label: '订单状态', value: '已完成' },
    { label: '创建时间', value: '2026-01-08 10:30:00' },
    { label: '商品名称', value: '电子产品' },
    { label: '数量', value: '100' },
    { label: '重量(kg)', value: '250' },
    { label: '操作员', value: 'Admin' },
  ];

  return <OPInfoCard data={data} columns={4} />;
};