import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import StudioLogo from './StudioLogo';

interface MobileStudioFallbackProps {
  editClipId?: string;
}

export default function MobileStudioFallback({
  editClipId,
}: MobileStudioFallbackProps) {
  return (
    <div className='fixed inset-0 z-1000000000 flex flex-col items-center justify-center gap-4 p-4'>
      <div className='flex h-[500px] w-full max-w-[360px] flex-col overflow-hidden rounded-[32px] border border-border-secondary'>
        <div className='h-[60%]'>
          <img
            src='https://cdn-o.suno.com/studio_mobile_web.jpg'
            alt='Suno Studio Mobile'
            className='h-full w-full object-cover object-bottom'
          />
        </div>
        <div className='flex h-[40%] flex-col items-center justify-end gap-2 p-4'>
          <div className='flex-shrink-0'>
            <StudioLogo />
          </div>
          <p
            className='flex-shrink-0 text-center text-foreground-tertiary-on-dark'
            style={{
              fontSize: '14px',
              fontStyle: 'normal',
              fontWeight: 400,
              lineHeight: '20px',
            }}
          >
            {editClipId ? 'Edit Mode' : 'Suno Studio'} is currently
            desktop-only.
          </p>
          <div className='mt-2 flex flex-shrink-0 flex-row gap-2'>
            <Button
              href='/'
              variant={ButtonVariant.Secondary}
              shape={ButtonShape.Pill}
              className='!border-none bg-background-tertiary px-6 py-4 text-lg font-medium before:!border-transparent'
            >
              Back Home
            </Button>
            {editClipId && (
              <Button
                href={`/edit-legacy/${editClipId}`}
                variant={ButtonVariant.Secondary}
                shape={ButtonShape.Pill}
                className='!border-none bg-background-tertiary px-6 py-4 text-lg font-medium before:!border-transparent'
              >
                Legacy Editor
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}