import LoaderIcon from '@/components/icons/loader-icon';
import { useApiSWR } from '@/hooks/useSWR';
import { useTranslation } from 'react-i18next';
import ReferralNode, {
  type ReferralNode as ReferralNodeType,
} from './referral-node';

export default function ReferralTree({ userId }: { userId: string }) {
  const { data, isLoading } = useApiSWR<ReferralNodeType>(
    `/admin/users/${userId}/tree`,
  );

  const { t } = useTranslation();

  if (isLoading) {
    return (
      <div className="flex h-96 items-center justify-center gap-2 rounded-2xl border border-black/5">
        <LoaderIcon />
        {t('Loading...')}
      </div>
    );
  }

  if (!data) {
    return (
      <div className="flex h-96 items-center justify-center rounded-2xl border border-black/5">
        <p className="text-sm text-black/40">{t('No referral data found.')}</p>
      </div>
    );
  }

  return <ReferralNode data={data} />;
}