import { jsx, jsxs } from "react/jsx-runtime";
import { arrayOf, func, shape, string } from "prop-types";
import React from "react";
import styled from "styled-components";
import Box from "../../Box";
import Text from "../../Text";
import Rate from "./Rate";
import TinyTextIcon from "./TinyTextIcon";
const List = styled(Text.Caption).attrs({
  numberOfLines: 1,
  color: ({ color }) => color || "deep"
})`
  flex: 1;
`;
const ItemSeparator = styled(Box).attrs({
  height: "zero"
})``;
const Attendances = ({ attendances, rate = void 0, color = "deep" }) => /* @__PURE__ */ jsxs(
  Box,
  {
    display: "flex",
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    mb: "xxxsmall",
    children: [
      /* @__PURE__ */ jsx(List, { color, children: attendances.map(({ description, icon }) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
        /* @__PURE__ */ jsx(TinyTextIcon, { as: icon, marginTop: "2px", fill: color || "deep" }),
        /* @__PURE__ */ jsx(ItemSeparator, { w: "xxxsmall" }),
        description,
        /* @__PURE__ */ jsx(ItemSeparator, { w: "xxsmall" })
      ] }, description)) }),
      rate && /* @__PURE__ */ jsx(Rate, { rate })
    ]
  }
);
Attendances.propTypes = {
  attendances: arrayOf(
    shape({
      description: string,
      icon: func
    })
  ).isRequired,
  rate: string,
  color: string
};
var Attendances_default = Attendances;
export {
  Attendances_default as default
};
