import Avatar from '@design-system/Avatar';
import { IconArrowLeft, IconX } from '@tabler/icons-react';

import HeaderActions from '../components/HeaderActions';
import HeaderContainer from '../components/HeaderContainer';
import HeaderExtraActions from '../components/HeaderExtraActions';
import HeaderIconButton from '../components/HeaderIconButton';
import HeaderInfo from '../components/HeaderInfo';
import HeaderMainActions from '../components/HeaderMainActions';
import HeaderPill from '../components/HeaderPill';
import HeaderTitle from '../components/HeaderTitle';

import { type SocialHeaderProps } from './types';

const SocialHeader = ({
  avatar,
  title,
  pillLabel,
  mainActions = [],
  extraActions = [],
  onClose,
  onBack,
  slotProps,
  copyLinkButton,
  loading,
}: SocialHeaderProps) => (
  <HeaderContainer slotProps={slotProps}>
    <HeaderInfo copyLinkButton={!loading ? copyLinkButton : undefined}>
      <HeaderIconButton
        Icon={IconArrowLeft}
        onClick={onBack}
        loading={loading}
      />
      <Avatar
        loading={loading}
        {...avatar}
        {...slotProps?.avatar}
      />
      <HeaderTitle
        title={title}
        loading={loading}
        slotProps={slotProps?.title}
      />
      <HeaderPill
        label={pillLabel}
        loading={loading}
        pillProps={slotProps?.pill}
      />
    </HeaderInfo>
    <HeaderActions>
      <HeaderMainActions
        actions={mainActions}
        loading={loading}
      />
      <HeaderExtraActions
        actions={extraActions}
        loading={loading}
        closeDropdownOnClick={slotProps?.extraActions?.closeDropdownOnClick}
      />
      <HeaderIconButton
        Icon={IconX}
        onClick={onClose}
        loading={loading}
      />
    </HeaderActions>
  </HeaderContainer>
);

export type { SocialHeaderProps };

export default SocialHeader;