import React from "react";

import type { FC } from "react";

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

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

import Image from "next/image";

import type { Submenu } from "../../header.types";
import Link from "next/link";

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 }))}>
        {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>
  );
};
