import { FC } from "react";
import DocsIcon from "@mui/icons-material/TextSnippet";
import { LibrariesItemProps } from "./interface";
import {
  actionGroupContainerStyle,
  aliasContainerStyle,
  itemContainerStyle,
  titleContainerStyle,
  titleStyle,
} from "./style";
import IconHotSpot from "@/utils/IconHotSpot";
import { useTheme } from "@mui/material";

export const LibrariesItem: FC<LibrariesItemProps> = (props) => {
  const { title, alias, docLink } = props;
  const theme = useTheme();
  return (
    <div css={itemContainerStyle}>
      <div css={titleContainerStyle}>
        <span css={titleStyle(theme)}>{title}</span>
        <div css={actionGroupContainerStyle}>
          {/* <DocsIcon /> */}
          <IconHotSpot>
            <a style={{ color: "gray" }} href={docLink} target="_blank">
              <DocsIcon sx={{ fontSize: "13px" }} />
            </a>
          </IconHotSpot>
        </div>
      </div>
      <p css={aliasContainerStyle}>{alias ?? title}</p>
    </div>
  );
};
