import * as React from 'react';
import classNames from 'classnames/bind';
import Link from 'next/link';

import s from './ToggleItem.module.scss';

const cn = classNames.bind(s);

interface IToggleItemProps {
  title: string;
  color: string;
  href: any;
  currentLink: string;
}

export const ToggleItem = ({ title, color, href, currentLink }: IToggleItemProps) => {
  const selected = href.pathname === currentLink || href === currentLink;
  return (
    <Link href={href} className={cn(s.toggleItem, `color-${color}`, { selected })}>
      <span className={cn(s.toggleItem__title, `color-${color}`, { selected })}>{title}</span>
    </Link>
  );
};