import { Logo } from "@buzzwaretech/propel/emoji-icon-picker";
import { ChevronRightIcon } from "@buzzwaretech/propel/icons";
import { observer } from "mobx-react";
// icons
import { Row } from "@buzzwaretech/ui";
// helpers
import { useProject } from "@/hooks/store/use-project";
import { cn } from "@buzzwaretech/utils";

type Props = {
  projectId: string;
  count?: number;
  showCount?: boolean;
  isExpanded?: boolean;
};

export const CycleListProjectGroupHeader = observer(
  function CycleListProjectGroupHeader(props: Props) {
    const { projectId, count, showCount = false, isExpanded = false } = props;
    // store hooks
    const { getProjectById } = useProject();
    // derived values
    const project = getProjectById(projectId);

    if (!project) return null;
    return (
      <Row className="flex flex-shrink-0 items-center gap-2 py-2.5">
        <ChevronRightIcon
          className={cn("h-4 w-4 text-tertiary duration-300", {
            "rotate-90": isExpanded,
          })}
          strokeWidth={2}
        />
        <div className="flex size-4 flex-shrink-0 items-center justify-center overflow-hidden">
          <Logo logo={project.logo_props} size={16} />
        </div>
        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
          <div className="line-clamp-1 inline-block truncate font-medium text-primary">
            {project.name}
          </div>
          {showCount && (
            <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>
          )}
        </div>
      </Row>
    );
  },
);