import { cn } from "@buzzwaretech/utils";
import type { ReactNode } from "react";

type TSidebarPropertyListItemProps = {
  icon: React.FC<{ className?: string }>;
  label: string;
  children: ReactNode;
  appendElement?: ReactNode;
  childrenClassName?: string;
};

export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
  const {
    icon: Icon,
    label,
    children,
    appendElement,
    childrenClassName,
  } = props;

  return (
    <div className="flex items-start gap-2">
      <div className="flex h-7.5 w-30 shrink-0 items-center gap-1.5 text-body-xs-regular text-tertiary">
        <Icon className="size-4 shrink-0" />
        <span>{label}</span>
        {appendElement}
      </div>
      <div
        className={cn(
          "flex grow flex-wrap items-center gap-1",
          childrenClassName,
        )}
      >
        {children}
      </div>
    </div>
  );
}