import {
  SectionHeader,
  SectionHeaderProps,
  Text,
  CounterBadge,
  Box,
} from '@wix/design-system';
import React from 'react';
import { CollectionSectionHeaderActionBar } from './CollectionSectionHeaderActionBar';
import { Section } from './CollectionSectionHeader.types';

export interface CollectionSectionHeaderProps
  extends Pick<SectionHeaderProps, 'skin' | 'dataHook'> {
  section: Section & { count: number; hasMore?: boolean };
  biComponentType: string;
}

export const CollectionSectionHeader = ({
  section,
  skin,
  dataHook,
  biComponentType,
}: CollectionSectionHeaderProps) => {
  const title = (
    <Box verticalAlign="middle" gap="SP1">
      <Text size="small" weight="normal">
        {section.title}
      </Text>
      {section.badge?.visible && (
        <CounterBadge
          truncate={false}
          skin={section.badge.skin || 'light'}
          dataHook="section-header-badge"
        >
          {section.count}
          {section.hasMore ? '+' : ''}
        </CounterBadge>
      )}
    </Box>
  );

  return (
    <SectionHeader
      dataHook={dataHook}
      title={title}
      skin={skin}
      divider="none"
      size="small"
      suffix={
        <CollectionSectionHeaderActionBar
          section={section}
          biComponentType={biComponentType}
        />
      }
    />
  );
};
