import React, {ReactNode} from 'react';
import {TimePicker} from "@mui/x-date-pickers";
import './customdatetimepicker.scss';
import dayjs, {Dayjs} from 'dayjs';

type CustomTimePickerProps = {
    value: any
    onChange: any
    minTime?: Dayjs
    maxTime?: Dayjs
    text?:string
    readOnly?:boolean
}

const CustomTimePicker = ({value, onChange, text, maxTime, minTime, readOnly=false}: CustomTimePickerProps) => {



    return (
        <TimePicker
            readOnly ={readOnly}
            minTime={dayjs('2023-01-01T08:00:00')}
            maxTime={dayjs('2023-01-01T20:00:00')}
            value={value}
            onChange={onChange}
            ampm={false}
            renderInput={({ inputRef, inputProps, InputProps }) => (
                <div className={'rendered-date-time'}>
                    <input ref={inputRef} {...inputProps} />
                    <span>{text}</span>
                    {InputProps?.endAdornment}
                </div>
            )}
        />
    );
}

export default CustomTimePicker;