import { Box, TextButton } from '@wix/design-system';
import React from 'react';
import { Section } from './CollectionSectionHeader.types';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { wixPatternsSectionHeaderPrimaryActionClicked } from '@wix/bex-core/bi';

export interface CollectionSectionHeaderActionBarProps {
  section: Section;
  biComponentType: string;
}

export const CollectionSectionHeaderActionBar = ({
  section,
  biComponentType,
}: CollectionSectionHeaderActionBarProps) => {
  const { toolbarBIReporter } = useToolbarCollectionContext();
  const { primaryAction } = section;

  const handleClick = () => {
    toolbarBIReporter.reportBi(
      wixPatternsSectionHeaderPrimaryActionClicked({
        sectionId: section.id,
        cta: primaryAction?.id,
        componentType: biComponentType,
      }),
    );

    primaryAction?.onClick?.();
  };

  return (
    <Box direction="horizontal">
      {primaryAction && (
        <TextButton
          prefixIcon={primaryAction.prefixIcon}
          dataHook="collection-section-header-primary-action"
          onClick={handleClick}
          size="small"
        >
          {primaryAction.label}
        </TextButton>
      )}
    </Box>
  );
};
