import { memo, type ReactNode } from 'react';

import HuAccordion from '@material-hu/components/design-system/Accordion';

import {
  type CompetencyGroup,
  type ReviewDetailFormQuestions,
} from 'src/pages/dashboard/performance/types';

import CompetencyGroupItemsList from './CompetencyGroupItemsList';

type CompetencyGroupCardProps = {
  group: CompetencyGroup;
  answered: boolean;
  canViewGoalDetails: boolean;
  getHeaderActions?: (question: ReviewDetailFormQuestions) => ReactNode;
};

const CompetencyGroupCard = ({
  group,
  answered,
  canViewGoalDetails,
  getHeaderActions,
}: CompetencyGroupCardProps) => {
  if (!group.category) {
    return (
      <CompetencyGroupItemsList
        items={group.items}
        answered={answered}
        canViewGoalDetails={canViewGoalDetails}
        getHeaderActions={getHeaderActions}
      />
    );
  }

  return (
    <HuAccordion
      title={group.category.name}
      description={group.category.description ?? undefined}
      defaultExpanded
      customDetail={
        <CompetencyGroupItemsList
          items={group.items}
          answered={answered}
          canViewGoalDetails={canViewGoalDetails}
          getHeaderActions={getHeaderActions}
        />
      }
    />
  );
};

export default memo(CompetencyGroupCard);