import Icon from "components/Icon";
import Link from "next/link";
import styles from "styles/Button.module.sass";
import { SocialButton } from "utils/types";
import { useTheme } from 'next-themes'

const Button = (props: SocialButton) => {
  const { resolvedTheme: theme } = useTheme()

  return (
    <>
      <Link href={props.url}>
        <a>
          <div data-theme={theme} className={styles.button}>
            <Icon className={styles.icon} icon={props.icon} />
            <div className={styles.platform_username}>
              <p className={styles.platform}>{props.platform}</p>
              <p className={styles.username}> {props.username} </p>
            </div>
            <Icon className={styles.link} icon="arrow-up-right" />
          </div>
        </a>
      </Link>
    </>
  );
};

export default Button;