import * as React from "react"
import cls from "classnames"

import * as styles from "./index.module.scss"
import logo1 from "@/assets/images/official-icons/logo1.svg"
import logo2 from "@/assets/images/official-icons/logo2.svg"
import logo3 from "@/assets/images/official-icons/logo3.svg"
import logo4 from "@/assets/images/official-icons/logo4.svg"
import logo5 from "@/assets/images/official-icons/logo5.svg"
import logo6 from "@/assets/images/official-icons/logo6.svg"
import { ICON_NAMES, SINGLE_ICON_ZIPS } from "@/constants/logo-download"

import { Icon } from "@/components"

type IconContainer = {
  counter: number
}

type SingleIconBlockParams = {
  imgData: string
  zipUrl: string
  name: string
}

const SingleIconBlock: React.FC<SingleIconBlockParams> = ({
  imgData,
  zipUrl,
  name,
}) => {
  return (
    <div>
      <img alt={name} src={imgData}></img>
      <div className={cls(styles.imgFooter)}>
        <Icon name="download" />
        <a href={zipUrl}>{`下载 ${name}`}</a>
      </div>
    </div>
  )
}

const IconContainer: React.FC<IconContainer> = ({ counter }) => {
  return (
    <div className={cls(styles.iconContainer)}>
      <SingleIconBlock
        imgData={counter ? logo4 : logo1}
        zipUrl={SINGLE_ICON_ZIPS[counter * 3]}
        name={ICON_NAMES[counter * 3]}
      />
      <div className={cls(styles.spacer)}></div>
      <SingleIconBlock
        imgData={counter ? logo5 : logo2}
        zipUrl={SINGLE_ICON_ZIPS[counter * 3 + 1]}
        name={ICON_NAMES[counter * 3 + 1]}
      />
      <div className={cls(styles.spacer)}></div>
      <SingleIconBlock
        imgData={counter ? logo6 : logo3}
        zipUrl={SINGLE_ICON_ZIPS[counter * 3 + 2]}
        name={ICON_NAMES[counter * 3 + 2]}
      />
    </div>
  )
}

export default IconContainer