/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

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

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

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

  return (
    <div className={cn("grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] items-start gap-x-6", className)}>
      <div
        className={cn(
          "flex min-h-7.5 min-w-0 items-start gap-1.5 text-body-xs-regular text-tertiary",
          labelClassName
        )}
      >
        <Icon className="size-4 shrink-0" />
        <span className="min-w-0 break-words">{label}</span>
        {appendElement}
      </div>
      <div className={cn("flex min-w-0 flex-wrap items-center gap-1 justify-self-stretch", childrenClassName)}>
        {children}
      </div>
    </div>
  );
}
