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

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>
  );
};
