import Dropdown from '@design-system/Dropdown';
import { type DropdownProps } from '@design-system/Dropdown/types';
import Skeleton from '@design-system/Skeleton';
import { Button, type ButtonProps } from '@mui/material';

import { MAX_MAIN_ACTIONS } from '../constants';

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

const HeaderMainActions = ({
  actions = [],
  loading,
}: HeaderMainActionsProps) => {
  if (loading) {
    return (
      <Skeleton
        width={105}
        height={40}
      />
    );
  }

  if (actions.length === 0) return null;

  return actions
    .slice(0, MAX_MAIN_ACTIONS)
    .map(({ key, dropdown, ...buttonProps }) =>
      dropdown ? (
        <Dropdown
          key={key}
          {...(buttonProps as DropdownProps)}
        />
      ) : (
        <Button
          key={key}
          variant="outlined"
          {...(buttonProps as ButtonProps)}
        />
      ),
    );
};

export default HeaderMainActions;
