import styled from 'styled-components';

const Root = styled.h1<{ justifyContent?: string }>`
	display: flex;
	justify-content: ${props => props.justifyContent ? props.justifyContent : 'flex-start'};
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', ${props => props.theme.fontFamily};
	font-size: ${props => props.theme.fontSize * 1.15}px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: ${props => props.theme.color};
	margin: 0 0 12px 0;
`;

const Title = styled.span<{ justifyContent?: string }>`
	text-align: ${props => props.justifyContent === 'center' ? 'center' : 'left'};
`;


interface Props {
	title: string;
	justifyContent?: string;
}

export default function DialogTitle(props: Props) {
	return (
		<Root justifyContent={props.justifyContent}>
			<Title justifyContent={props.justifyContent}>{props.title}</Title>
		</Root>
	);
}