'use client'

export default function ProgramPage() {
  // const org_name = useSearchParams()
  const router = useRouter()

  const { user, isAuthLoading } = useAuth();
  const [token, setToken] = useState<string | null>(null);
  
  useEffect(() => {
    if (user) {
      user.getIdToken().then((token) => {
        setToken(token);
      }).catch((error) => {
        console.error('An error occurred while getting the token:', error);
      });
    } else if (!user && !isAuthLoading) {
        router.push('/logout');
      } else{
        console.log('user is null');
    }
  }, [user, router, isAuthLoading]);

  // const programs = await fetchPrograms(token)

  return (
    <div className="mt-9 ml-8 mr-8">
      <div className="flex items-center justify-between">
        <h2 className="mt-2 mb-2 text-3xl font-bold tracking-tight">Programs</h2>
        {/* <AddProgramPopup /> */}
      </div>
      <div className="mt-8 flex flex-wrap">
        <ProgramCards token={token} />
      </div>
    </div>
  );
}

const ProgramCard = ({ program }) => (
  <Link href={`/dashboard/programs/${program.id}`}>
    <div className="relative m-4 w-96 flex h-64 flex-col overflow-hidden rounded-lg bg-white shadow">
      <Image
        src={volunteers}
        alt='Background Image'
        layout="fill"
        objectFit="cover"
        className="absolute z-0"
      />
    </div>
  </Link>
  );

async function ProgramCards ({token}) {
  const programs = await fetchPrograms(token)

  console.log(programs)

  return (
    <div>
      {programs.map(program => <ProgramCard key={program.id} program={program} />)}
    </div>
  )
}
export default ProgramCards