import { ProDescriptions } from '@ant-design/pro-components';
import { GpsData } from '..';
const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
  return (
    <ProDescriptions<GpsData>
      dataSource={gpsData || undefined}
      layout="horizontal"
      // responsive columns
      column={{
        xs: 1, // mobile
        sm: 1,
        md: 2, // tablet
        lg: 2,
        xl: 2,
      }}
      columns={[
        {
          title: 'Kinh độ',
          dataIndex: 'lat',
          render: (_, record) =>
            record?.lat != null ? `${Number(record.lat).toFixed(5)}°` : '--',
        },
        {
          title: 'Vĩ độ',
          dataIndex: 'lon',
          render: (_, record) =>
            record?.lon != null ? `${Number(record.lon).toFixed(5)}°` : '--',
        },
        {
          title: 'Tốc độ',
          dataIndex: 's',
          valueType: 'digit',
          render: (_, record) => `${record.s} km/h`,
          span: 1,
        },
        {
          title: 'Hướng',
          dataIndex: 'h',
          valueType: 'digit',
          render: (_, record) => `${record.h}°`,
          span: 1,
        },
        {
          title: 'Trạng thái',
          tooltip: 'Thuyền có đang đánh bắt hay không',
          dataIndex: 'fishing',
          render: (_, record) =>
            record?.fishing ? 'Đang đánh bắt' : 'Không đánh bắt',
        },
      ]}
    />
  );
};

export default GpsInfo;
