// import IconHotSpot from "@illa-public/icon-hot-spot"
import { FC } from "react"
// import { Link } from "react-router-dom"
import DocsIcon from '@mui/icons-material/TextSnippet';
// import { DocsIcon } from "@illa-design/react"
import { LibrariesItemProps } from "./interface"
import {
  actionGroupContainerStyle,
  aliasContainerStyle,
  itemContainerStyle,
  titleContainerStyle,
  titleStyle,
} from "./style"
import IconHotSpot from "@/utils/IconHotSpot";

export const LibrariesItem: FC<LibrariesItemProps> = (props) => {
  const { title, alias, docLink } = props
  return (
    <div css={itemContainerStyle}>
      <div css={titleContainerStyle}>
        <span css={titleStyle}>{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>
  )
}
