import type { ReactNode } from "react";

/** Identidad y metadatos flexibles con acciones independientes y accesibles. */
export function CompactListItem({
  title,
  metadata,
  icon,
  actions,
  children,
  entityId,
}: {
  title: ReactNode;
  metadata?: ReactNode;
  icon?: ReactNode;
  actions?: ReactNode;
  children?: ReactNode;
  entityId?: string;
}) {
  return (
    <li
      className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 py-2 first:pt-0 last:pb-0"
      data-entity-id={entityId}
      data-slot="compact-list-item"
    >
      {icon && (
        <span aria-hidden="true" className="shrink-0 text-muted-foreground [&_svg]:size-5">
          {icon}
        </span>
      )}
      <div className="min-w-0 flex-1 basis-36">
        <div className="font-medium [overflow-wrap:anywhere]">{title}</div>
        {metadata && (
          <div className="text-xs text-muted-foreground [overflow-wrap:anywhere]">{metadata}</div>
        )}
        {children}
      </div>
      {actions && <div className="flex min-w-0 flex-wrap items-center gap-2">{actions}</div>}
    </li>
  );
}