import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import PersonaCard from '@/components/card/PersonaCard';
import SpinnerSVG from '@/components/svg/SpinnerSVG';

export const TrashPersonaContent = observer(() => {
  const { persona } = useStores();
  const [trashedPersonas, setTrashedPersonas] = useState<any[]>([]);
  const [isLoadingPersonas, setIsLoadingPersonas] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      const response = await persona.getTrashedPersonas();
      setTrashedPersonas(response || []);
      setIsLoadingPersonas(false);
    };
    loadData();
  }, []);

  return (
    <div className='px-6'>
      {isLoadingPersonas ? (
        <div className='flex items-center justify-center pt-[60px]'>
          <SpinnerSVG />
        </div>
      ) : trashedPersonas?.length === 0 ? (
        <div className='font-sans text-foreground-primary'>
          No trashed personas found.
        </div>
      ) : (
        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
          {trashedPersonas?.map((persona: any) => (
            <PersonaCard
              name={persona.name}
              key={persona.id}
              id={persona.id}
              image_url={persona.image_s3_id}
              user_image_url={persona.user_image_url}
              user_display_name={persona.user_display_name}
              user_handle={persona.user_handle}
              root_clip_id={persona.root_clip_id}
            />
          ))}
        </div>
      )}
    </div>
  );
});

export default TrashPersonaContent;