import { styled } from '@mui/material/styles';

const Root = styled('div')(({ theme }) => ({
	'& > .logo-icon': {
		transition: theme.transitions.create(['width', 'height'], {
			duration: theme.transitions.duration.shortest,
			easing: theme.transitions.easing.easeInOut
		})
	},
	'& > .badge': {
		transition: theme.transitions.create('opacity', {
			duration: theme.transitions.duration.shortest,
			easing: theme.transitions.easing.easeInOut
		})
	}
}));

/**
 * The logo component.
 */
function Logo() {
	return (
		<Root className="flex items-center">
			<img
				className="logo-icon h-32 w-32"
				src="assets/images/logo/logo1.svg"
				alt="logo"
			/>
			<div className="flex space-x-8 items-center">
				<div
					className="badge flex items-center rounded px-1 py-4"
					style={{ color: '#3cb1fe' }}
				>
					<p>softec Tecnologies</p>
				</div>
				{/* <div
					className="badge flex items-center rounded px-8 py-4"
					style={{ backgroundColor: 'rgb(48,120,198)', color: '#ffffff' }}
				>
					<span className="react-text mx-4 text-12">TypeScript</span>
				</div> */}
			</div>
		</Root>
	);
}

export default Logo;
