import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { string } from "prop-types";
import { StarFilled } from "@gympass/yoga-icons";
import Icon from "../../Icon";
import Text from "../../Text";
const Content = styled.View`
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  align-items: center;
`;
const RateValue = styled(Text.Overline)`
  ${({
  theme: {
    yoga: {
      spacing: { xxxsmall }
    }
  }
}) => {
  return `
      margin-left: ${xxxsmall}px;
    `;
}}
`;
const Rate = ({ rate }) => /* @__PURE__ */ jsxs(Content, { children: [
  /* @__PURE__ */ jsx(Icon, { as: StarFilled, fill: "deep", width: "xsmall", height: "xsmall" }),
  /* @__PURE__ */ jsx(RateValue, { variant: "deep", children: rate })
] });
Rate.propTypes = {
  rate: string.isRequired
};
var Rate_default = Rate;
export {
  Rate_default as default
};
