import * as React from "react"
import { Container, Icon } from "@/components"
import * as styles from "./index.module.scss"

interface IProps {
  content: {
    title: string
    tableHeader: string[]
    tableBody: TableBody[]
  }
}

interface TableBody {
  name: string
  standard: boolean | string
  elite: boolean | string
  expert: boolean | string
}

const PartnerRightsTable: React.FC<IProps> = ({
  content: { title, tableHeader, tableBody },
}) => {
  const getTdContent = (value: boolean | string) => {
    if (typeof value === "boolean") {
      return value ? <Icon name="check" /> : ""
    } else {
      return <span dangerouslySetInnerHTML={{ __html: value }}></span>
    }
  }

  return (
    <div className={styles.partnerRightsTable}>
      <Container isSmall={true}>
        <h2>{title}</h2>
        <table>
          <thead>
            <tr>
              {tableHeader.map((headerList, headerIndex) => (
                <th key={headerIndex}>{headerList}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {tableBody.map((bodyList, bodyIndex) => (
              <tr key={bodyIndex}>
                <td>{bodyList.name}</td>
                <td>{getTdContent(bodyList.standard)}</td>
                <td>{getTdContent(bodyList.elite)}</td>
                <td>{getTdContent(bodyList.expert)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Container>
    </div>
  )
}

export default PartnerRightsTable