import React, { useState } from "react";
import { Pill } from "../..";
import { Grid } from "@mui/material";
import { EntityTagsProps } from "./types";

const EntityTags = ({ entityTagsList, selectedEntity, setSelectedEntity }: EntityTagsProps) => {

  const calculateGridSize = () => {
    const itemCount = entityTagsList?.length;
    if (itemCount == 0) return 12;
    return 12 / itemCount;
  };

  return (
    <Grid container spacing={1}>
      {entityTagsList?.length > 0 && entityTagsList?.map((entity, index) => {
        const isSelected = selectedEntity?.id === entity?.id;
        return (
          <Grid item xs={calculateGridSize()} key={index}>
            <Pill
              item={{ ...entity, color: isSelected ? "#005bf8" : "gray" }}
              variant={isSelected ? "filled" : "outlined"}
              size="full"
              onClick={() => {
                setSelectedEntity?.(entity);
              }}
            />
          </Grid>
        );
      })}
    </Grid>
  );
};

export default EntityTags;
