'use client';


import { useEffect, useState } from 'react';
import { IRewardItem } from '@/contexts/types/reward';
import { NotFoundView } from '@/shared/sections/error';
import RewardView from '@/shared/sections/rewards/reward-details';
import axios from 'axios';
import axiosInstancee from '@/utils/axios';


type Props = {
  params: {
    id: string;
  };
};

export default function RewardDetailsPage({ params }: Props) {
  const { id } = params;
  const [reward, setReward] = useState<IRewardItem | null>(null);
  const [loading, setLoading] = useState(true);


  useEffect(() => {
    // Fetch the reward based on the ID from the URL
    const fetchReward = async () => {
      try {
        const response = await axiosInstancee.get(`/api/projects/rewards/${id}`);
        setReward(response.data);
      } catch (error) {
        console.error('Error fetching reward:', error);
        setReward(null);
      } finally {
        setLoading(false);
      }
    };

    fetchReward();
  }, [id]);

  if (loading) {
    return <div>Loading...</div>; // You can replace this with a loader component
  }

  if (!reward) {
    return <NotFoundView />; // Show "Page Not Found" if the reward is not found
  }

  return <RewardView reward={reward} />;
}