Untitled

import BasePreview from './Previews/BasePreview';
import BusinessPreview from './Previews/BusinessPreview';
import ImagesPreview from './Previews/ImagesPreview';
import MenuPreview from './Previews/MenuPreview';
import Mp3Preview from './Previews/Mp3Preview';
import VideoPreview from './Previews/VideoPreview';
import WebsitePreview from './Previews/WebsitePreview';

const MobilePreview = ({ showPreview }) => {
   const renderPreviewComponent = () => {
      switch (showPreview) {
         case 'website':
            return <WebsitePreview />;
         case 'image':
            return <ImagesPreview />;
         case 'video':
            return <VideoPreview />;
         case 'mp3':
            return <Mp3Preview />;
         case 'menu':
            return <MenuPreview />;
         case 'business':
            return <BusinessPreview />;
         default:
            return <BasePreview />;
      }
   };

   return (
      <div className='border-l border-slate-300 my-2'>
         <div className='hidden xl:flex flex-col items-center justify-center'>
            <h4 className='text-xl font-medium py-5'>Preview</h4>
            <div className='mockup-phone'>
               <div className='camera' />
               <div className='display'>
                  <div className='artboard artboard-demo phone-4 max-w-[300px] max-h-[580px]'>
                     {renderPreviewComponent()}
                  </div>
               </div>
            </div>
         </div>
      </div>
   );
};

export default MobilePreview;