import { Timeline, Typography } from 'antd'
import React from 'react'
import { CrudContext } from '../../../components/crud/useCrud'
import { PageTableContext } from '../../../components/crud/usePageTable'
import { EngineeringMemorabilia } from '../../../service/def'
import { renYYYYMMDD } from '../../../utils/renutil'

type IProps = {
  pagerCtx: PageTableContext<EngineeringMemorabilia>;
  crudCtx: CrudContext
}

const TimelineView: React.FC<IProps> = ({ pagerCtx, crudCtx }) => {

  const demodata = pagerCtx?.tableProps?.dataSource || [];

  return (
    <Timeline mode="alternate">
      {
        demodata.map(o => (
          <Timeline.Item
            key={o.id}
            label={renYYYYMMDD(o.tm)}
          >
            <Typography.Title level={5}>{o.name}</Typography.Title>
            <Typography.Text type="secondary">{o.desc}</Typography.Text>
          </Timeline.Item>
        ))
      }
    </Timeline>
  )
}

export default TimelineView