import React, { FC } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { cssMerge } from '../../../../utils/cssMerge';
import { mobileSubMenuLinkWrapper } from '../header.styles';
import { Submenu } from '../../header.types';
import { isActivePath } from '../../utils/functions';

export const MobileSubMenuItem: FC<Submenu> = ({
  title,
  description,
  secondDescription,
  url,
  imageSource = '',
  subMenuType,
}) => {
  const isImageSubMenu = subMenuType === 'image' && imageSource;

  return (
    <li>
      <Link
        href={url || ''}
        className={cssMerge(mobileSubMenuLinkWrapper({ variant: subMenuType, active: isActivePath(url) }))}
      >
        {isImageSubMenu && (
          <Image src={imageSource} alt={`${title}-image`} width={500} height={500} className="tw-w-auto" />
        )}
        {title && <span className="tw-text-md tw-font-medium tw-text-common-white">{title}</span>}
        {description && <span className="tw-text-md tw-text-gray-400">{description}</span>}
        {isImageSubMenu && secondDescription && (
          <span className="tw-text-md tw-text-gray-400">{secondDescription}</span>
        )}
      </Link>
    </li>
  );
};
