import Icon from "@ax/components/Icon";

import styled from "styled-components";

import type { ColorMode } from ".";

const getColorFromMode = (mode: ColorMode, theme: any) => {
	const modes = {
		info: {
			border: "#DBDDE9", // No hay border1 en el theme...
			main: theme.colors.interactive01,
		},
		warning: {
			border: theme.colors.error,
			main: theme.colors.error,
		},
		success: {
			border: theme.colors.success,
			main: theme.colors.success,
		},
	};

	return modes[mode];
};

const Content = styled.div<{ colorMode: ColorMode }>`
	border: 1px solid ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).border};
	padding: ${({ theme }) => theme.spacing.s};
	background: #ffffff;
	border-radius: 6px;
	width: 100%;
`;

const StyledIcon = styled(Icon)`
	margin-right: 4px;
`;

const Header = styled.p<{ colorMode: ColorMode }>`
	color: ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).main};
	column-gap: ${({ theme }) => theme.spacing.xs};
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	svg path {
	  fill: ${({ colorMode, theme }) => getColorFromMode(colorMode, theme).main};
	}
`;

const Title = styled.p`
	font-size: 12px;
`;

const Description = styled.span`
	font-weight: bold;
`;

const Detail = styled.p`
	font-size: 12px;
	color: ${({ theme }) => theme.colors.textMediumEmphasis};
`;

export { Content, Description, Detail, Header, StyledIcon, Title };
