import React from "react"
import { Container, Icon } from "@/components"
import Markdown from "@/components/markdown"
import { ICON_DOWNLOAD, ICON_ZIPS } from "@/constants/logo-download"
import IconContainer from "../icon-container"
import * as styles from "./index.module.scss"
import cls from "classnames"

type ZipDownloadParams = {
  name: string
  url: string
}

const ZipDownload: React.FC<ZipDownloadParams> = ({ name, url }) => {
  return (
    <div className={cls(styles.zipDownload)}>
      <Icon name="download" />
      <a href={url} download>
        {name}
      </a>
    </div>
  )
}

const IconDownloadContent = () => {
  return (
    <div className={styles.iconDownloadContent}>
      <Container isSmall>
        <Markdown body={ICON_DOWNLOAD} />
        <h2>PingCAP Logo</h2>
        <IconContainer counter={0} />
        <ZipDownload {...ICON_ZIPS.PingCAP} />
        <h2>TiDB Logo</h2>
        <IconContainer counter={1} />
        <ZipDownload {...ICON_ZIPS.TiDB} />
      </Container>
    </div>
  )
}

export default IconDownloadContent