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

import React from "react";
// types
import { CycleGroupIcon, ChevronDownIcon } from "@pi-dash/propel/icons";
import type { TCycleGroups } from "@pi-dash/types";
// icons
import { Row } from "@pi-dash/ui";
// helpers
import { cn } from "@pi-dash/utils";

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

export function CycleListGroupHeader(props: Props) {
  const { type, title, count, showCount = false, isExpanded = false } = props;
  return (
    <Row className="flex items-center justify-between py-2.5">
      <div className="flex flex-shrink-0 items-center gap-5">
        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
          <CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
        </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">{title}</div>
          {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
        </div>
      </div>
      <ChevronDownIcon
        className={cn("size-4 shrink-0 text-tertiary transition-transform", {
          "rotate-180": isExpanded,
        })}
      />
    </Row>
  );
}
