import React from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import Typography, { ITypo } from "../../Typography";
import classNames from "classnames";
import router from "next/router";
import { useEffect, useState } from 'react'

type IPropsClass = {
  text: string | JSX.Element;
  path?: string;
  isActive?: boolean;
};

type IStateClass = {};

class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
  public override render(): JSX.Element {
    return <Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}
    >
      <div className={classes["content"]}>
        <Typography typo={ITypo.NAV_HEADER_18}>
          {this.props.text}
        </Typography>
      </div>
      {this.props.isActive && <div className={classes["underline"]} />}
    </Link>;
  }

}

export default function HeaderLink(props: IPropsClass) {
  const [url, setUrl] = useState("")
  useEffect(() => setUrl(router?.asPath), [])
  const isActive = url === props.path;
  return <HeaderLinkClass {...props} isActive={isActive} />;
}
