import * as React from "react"
import cls from "classnames"
import Container from "@/components/container"
import ListLayout from "@/components/list-layout"
import * as styles from "./index.module.scss"
import Icon from "@/components/icon"
import {ImgIcon} from "@/components";

export interface ICommunityResourcesProp {
  name: string
  data: {
    iconName: string
    title: string
    url: string
    isBlank: boolean
    isClosed?: boolean
  }[]
  className?: string
}

const CommunityResources: React.FC<ICommunityResourcesProp> = ({
  name,
  data,
  className,
}) => {
  return (
    <div
      id="CommunityResources"
      className={cls(styles.communityResources, className)}
    >
      <Container>
        <h2>{name}</h2>
        <ListLayout listData={data}>
          {item =>
            item.isClosed ? (
              <div className={styles.inner}>
                <Icon name={item.iconName} />
                <span className={styles.isClosedText}>{item.title}</span>
              </div>
            ) : (
              <a
                href={item.url}
                target={item.isBlank ? "_Blank" : "_Self"}
                className={styles.inner}
              >
                {item.iconName ? (
                  <Icon name={item.iconName} />
                ) : item.iconPath ? (
                  <ImgIcon name={item.iconPath} alt={item.title} style={{marginRight: '1rem'}} />
                ) : (
                  <></>
                )}
                <span>{item.title}</span>
              </a>
            )
          }
        </ListLayout>
      </Container>
    </div>
  )
}

export default CommunityResources