import React from 'react';
import useSettings from '../../../vm-hooks/useSettings';
import SubTitle from '../../../vm-sub-title';
import Base from '../../../vm-info-collection';
import Rules from './Rules';
import TodayWork from './TodayWork';

import { BaseService } from '../../api';
import './index.less';

interface BaseInfoProps {
    id: string;
}

const BaseInfo = (props: BaseInfoProps) => {
    const { id } = props;
    const { theme } = useSettings();

    const { baseInfo, rules, todayWorkRes } = BaseService.useBaseInfo(id);

    return (
        <div className={`road-baseContent ${theme}`}>
            <div className="base-left">
                <div className="base-left-top">
                    <SubTitle title="基本信息" />
                    <Base data={baseInfo} horizontal={true} gap={24} />
                </div>
                <div className="base-left-bottom">
                    <Rules rules={rules} />
                </div>
            </div>
            <TodayWork data={todayWorkRes} />
        </div>
    );
};

export default BaseInfo;
