import "./links.sass";
import {Link as LinkBase} from "../router/Link";
import {Path} from "../router/router";
import {Link} from "./link";
import {LINKS} from "./links";
import {motion} from "motion/react";
import {AnimateFade} from "../animations";

export default function LinkTree() {
    return <motion.main className="link-tree" {...AnimateFade()}>
      <section className="link-ctr">
        {
          LINKS.map(link => <LinkBox key={link.name} {...link}/>)
        }
      </section>
    </motion.main>
}

function LinkBox(props: Link) {
  const {name, desc, img, href} = props;

  return <section className="link-box">
    <LinkBase target="_blank" className="link-box-ctr" href={href as Path}>
      <div className="link-img-ctr">
        {
          img && <img className="link-img" src={img.href} alt={img.alt} width={100} height={100}/>
        }
      </div>
      <div className="content-ctr">
        <div className="link-title">
          <h2>{name}</h2>
        </div>
        <div className="link-desc">{desc}</div>
      </div>
    </LinkBase>
  </section>
}