import React from 'react';

import { FC } from 'react';

import { cssMerge } from '../../../../utils/cssMerge';

import { desktopSubMenuWrapping } from '../header.styles';

import Image from 'next/image';

import { Submenu } from '../../header.types';
import Link from 'next/link';
import { isActivePath } from '../../utils/functions';

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

  return (
    <li>
      <Link
        href={url || ''}
        className={cssMerge(desktopSubMenuWrapping({ variant: subMenuType, active: isActivePath(url) }))}
      >
        {isImageSubMenu && <Image src={imageSource} alt={title || ''} width={200} height={180} 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>
  );
};
