import React from 'react';
import { NavigationMenuLink } from "@/components/ui/navigation-menu";
import { cn } from "@/lib/utils";
import { ListItemProps } from '../Header/_partials/header.type';

export const ListItem = React.forwardRef<React.ElementRef<"a">, ListItemProps>(
  ({ className, title, children, icon: Icon, ...props }, ref) => {
    return (
      <li>
        <NavigationMenuLink asChild>
          <a
            ref={ref}
            className={cn(
              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-zinc-500 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground bg-zinc-900 text-white",
              className
            )}
            {...props}
          >
            <div className="flex items-center text-sm font-medium leading-none">
              {Icon && <Icon className="mr-2 h-4 w-4" />}
              {title}
            </div>
            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-2">
              {children}
            </p>
          </a>
        </NavigationMenuLink>
      </li>
    );
  }
);
ListItem.displayName = "ListItem";