import { css } from '@emotion/react';
import styled from '@emotion/styled';

const StyledStatusBadge = styled.span`
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;

  ${(props) => {
		switch (props.status) {
			case 'IN_PROGRESS':
				return css`
          border: 0.06rem solid var(--Status-Blue2, rgba(190, 219, 255, 1));
          background: var(--Status-BlueLight, rgba(232, 242, 255, 1));
          color: var(--Status-Blue, rgba(21, 93, 252, 1));
        `;
			case 'COMPLETED':
				return css`
          border: 0.06rem solid var(--Status-Green2, rgba(185, 248, 207, 1));
          background: var(--Status-GreenLight, rgba(220, 252, 231, 1));
          color: var(--Status-Green, rgba(1, 102, 48, 1));
        `;
			default:
				return css`
          background-color: #f5f5f5;
          color: #9e9e9e;
        `;
		}
	}}
`;

export const StatusBadge = ({ status }) => {
	const getStatusText = (status) => {
		switch (status) {
			case 'IN_PROGRESS':
				return 'В работе';
			case 'COMPLETED':
				return 'Завершена';
			default:
				return 'В ожидании';
		}
	};

	return <StyledStatusBadge status={status}>{getStatusText(status)}</StyledStatusBadge>;
};