import { Button } from '@/components/ui/button';
import { PreviewNavbarProps, ViewportType } from '@/types/preview';
import { FaDesktop, FaMobileAlt, FaTabletAlt } from 'react-icons/fa';
import { MdOutlineRocket } from 'react-icons/md';

export default function PreviewNavbar({
  title,
  viewport,
  setViewport,
  onPublish,
  viewportOptions,
  isPublished,
  isOwner,
}: PreviewNavbarProps) {
  return (
    <div className='bg-neutral-800 text-white p-4 fixed top-0 left-0 right-0 z-[150] flex justify-between items-center'>
      <h1 className='font-bold'>{title || 'Portfolio'} Preview</h1>
      <div className='flex-1 flex justify-center items-center gap-2'>
        {Object.entries(viewportOptions).map(([key]) => (
          <Button
            key={key}
            variant={viewport === key ? 'light' : 'ghost'}
            size='sm'
            onClick={() => setViewport(key as ViewportType)}
          >
            {key === 'mobile' && (
              <>
                <FaMobileAlt className='h-4 w-4 mr-1' /> Mobile
              </>
            )}
            {key === 'tablet' && (
              <>
                <FaTabletAlt className='h-4 w-4 mr-1' /> Tablet
              </>
            )}
            {key === 'desktop' && (
              <>
                <FaDesktop className='h-4 w-4 mr-1' /> Desktop
              </>
            )}
          </Button>
        ))}
      </div>
      <div className='flex justify-end'>
        {isOwner && (
          <>
            {isPublished ? (
              <Button onClick={onPublish} variant='light' size='sm' className='flex items-center gap-2'>
                <MdOutlineRocket className='h-4 w-4' /> Unpublish
              </Button>
            ) : (
              <Button onClick={onPublish} variant='light' size='sm' className='flex items-center gap-2'>
                <MdOutlineRocket className='h-4 w-4' /> Publish
              </Button>
            )}
          </>
        )}
      </div>
    </div>
  );
}
