import type { FC } from 'react';
import React from 'react';
import ProfilesPopover from '../profilesPopover';
import ArtistProfileEmpty from './artistPopoverEmpty';
import ArtistProfile from './artistProfile';
import ArtistProfileLoader from './artistProfileLoader';
import type { ArtistStoreProfile } from '../../types';

interface Props {
    id: string;
    title?: string | JSX.Element;
    titleTooltip?: string | JSX.Element;
    profiles: ArtistStoreProfile[];
    isLoading?: boolean;
    loadingProfilesCount?: number;
    footer?: JSX.Element | null;
    onOpen?: () => void;
    children?: React.ReactNode;
}

const ArtistPopover: FC<Props> = ({
    id,
    title,
    children,
    titleTooltip,
    profiles,
    isLoading,
    loadingProfilesCount = 2,
    footer,
    onOpen,
}) => (
    <ProfilesPopover
        id={id}
        profileComponent={ArtistProfile}
        profileLoadingComponent={ArtistProfileLoader}
        profileEmptyComponent={ArtistProfileEmpty}
        title={title}
        titleTooltip={titleTooltip}
        profiles={profiles}
        loadingProfiles={loadingProfilesCount}
        isLoading={isLoading}
        footer={footer}
        onOpen={onOpen}
    >
        {children}
    </ProfilesPopover>
);

export default ArtistPopover;