/** @format */

import React from 'react';
import DefaultWidjetStyle, { DialPadIcon } from './style';
import TimerUi from '../TimerUi';

const DefaultWidjetUi = ({
	widjetState,
	phoneNumber,
	reason,
	widjetVersion,
	leftTime,
	onClick,
	position,
}) => {
	return (
		<DefaultWidjetStyle
			status={widjetState}
			onClick={onClick}
			position={position}>
			<div className='left'>
				<p className='title'>{phoneNumber}</p>
				<p>
					<span className='status'>{widjetState}</span>
					<TimerUi reason={reason} time={leftTime} />
				</p>
			</div>
			<div className='right'>
				<DialPadIcon />
			</div>
			<div className='bottom'>
				<DefaultWidjetStyle.StatusLine status={widjetState}>
					<p className='verison'>v {widjetVersion}</p>
				</DefaultWidjetStyle.StatusLine>
			</div>
		</DefaultWidjetStyle>
	);
};

export default DefaultWidjetUi;