/** @format */

import styled from 'styled-components';

const Block = styled.div`
	width: 200px;
	padding: 8px;
	background-color: #c9d5d9;
	position: absolute;
	bottom: 50px;
	border-radius: 10px;
	left: 50%;
	transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.3s' : '0s' : '0.3s' };
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 8px;
	transform: translate(-50%, 0);
	${({ visiblevalue }) =>
		visiblevalue
			? {
					opacity: '1',
					transform: 'translate(-50%, 0)',
					display: 'block',
			  }
			: {
					opacity: '0',
					transform: 'translate(-50%, 0)',
					display: 'none',
			  }}
`;
Block.ShowNumbersArea = styled.div`
	grid-column: 1/4;
	height: 33px;
	color: #000;
	font-size: 22px;
	text-align: center;
	letter-spacing: 5px;
	font-weight: bold;
`;
const NumberButton = styled.div`
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 7px;
	font-size: 22px;
	cursor: pointer;
	height: 33px;
	background-color: ${({ status = '', type = '' }) =>
		type === 'call_button'
			? status === 'pending'
				? 'orange'
				: status === 'connected' && '#a0c13d'
			: '#5e5e5e'};
`;
NumberButton.Icon = styled.div`
	font-size: 20px;
`;

export { NumberButton };

export default Block;
