import * as S from "./styles";

function StatusTile(props: StatusTileProps) {
	const { detail, description, icon, title, mode } = props;

	return (
		<S.Content colorMode={mode}>
			<S.Header colorMode={mode}>
				<S.StyledIcon name={icon} size="16px" />
				<S.Title>{title}</S.Title>
			</S.Header>
			<S.Description>{description}</S.Description>
			<S.Detail>{detail}</S.Detail>
		</S.Content>
	);
}

export type ColorMode = "info" | "success" | "warning";

interface StatusTileProps {
	icon: string;
	title: string;
	description: string;
	detail: string;
	mode: ColorMode;
}

export default StatusTile;
