import type { JSXElement } from "solid-js";

interface Props {
  title?: string;
  className?: string;
  body?: string;
  href?: string;
  icon?: string | JSXElement | HTMLElement;
}

export const Item = ({ href, title, body, icon, className }: Props) => (
  <div
    class={`relative flex items-center gap-x-2 rounded-lg p-1 px-2 text-sm leading-6 
      ${className}`}
  >
    {icon && (
      <div class="flex flex-none items-center justify-center rounded-lg">
        {" "}
        {icon}{" "}
      </div>
    )}
    <div class="flex-auto gap-1">
      {title && <span class="block font-semibold">{title}</span>}
      {body && <div>{body}</div>}
    </div>
    {href && <a href={href} class="absolute inset-0" />}
  </div>
);