import { theme } from "@local-logic/core/ui";
import { css, styled } from "styled-components";

const getStyles = ($variant: "small" | "large") => {
  if ($variant === "small") {
    return css`
      height: 16px;
      padding: 0 ${theme["--ll-spacing-xx-small"]};
      font-size: ${theme["--ll-font-size-caption-2"]};
    `;
  }

  return css`
    height: 32px;
    width: 32px;
    font-size: ${theme["--ll-font-size-p"]};
  `;
};

export const ScoreBadge = styled.div<{
  $variant: "small" | "large";
  $isPrimary: boolean;
}>`
  position: relative;
  background: ${({ $isPrimary }) =>
    $isPrimary ? theme["--ll-color-primary"] : theme["--ll-color-disabled"]};
  color: ${theme["--ll-color-on-primary"]};
  border-radius: ${theme["--ll-border-radius-small"]};
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-family: ${theme["--ll-font-family"]};
  overflow: hidden;
  transition: background 160ms ease;
  flex-shrink: 0;
  ${({ $variant }) => getStyles($variant)};

  &:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }
`;

export const Value = styled.div`
  z-index: 1;
`;