import { StudioIcon } from '@/icons';

import Button, {
  Props as ButtonProps,
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';

const EMPTY_OBJECT = {};
export const magicStudioButtonStyle = {
  backgroundImage:
    'url(https://cdn-o.suno.com/auras-v2/studio-invite-button.png)',
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
};
export default function MagicStudioButton(props: ButtonProps) {
  return (
    <Button
      variant={
        props.disabled ? ButtonVariant.Standard : ButtonVariant.Secondary
      }
      size={ButtonSize.Small}
      shape={ButtonShape.Pill}
      icon={<StudioIcon className='h-6 w-6' />}
      style={props.disabled ? EMPTY_OBJECT : magicStudioButtonStyle}
      {...props}
    />
  );
}