import { FolderPlus } from 'lucide-react';
import { usePathname } from 'next/navigation';

export function EmptyProjectsSection() {
  const pathname = usePathname();
  const published = !pathname.includes('/portfolios/');
  return (
    !published && (
      <div className='flex flex-col items-center justify-center p-8 border-2 border-dashed border-neutral-300 rounded-lg bg-neutral-50 text-center'>
        <FolderPlus className='h-12 w-12 text-neutral-400 mb-4' />
        <h3 className='text-lg font-medium text-neutral-700 mb-2'>No Projects Added Yet</h3>
        <p className='text-sm text-neutral-500 mb-6 max-w-md'>
          To add projects, select this component and use the Projects editor panel on the right side. You can also add
          projects from your dashboard and they will appear here.
        </p>
      </div>
    )
  );
}
