import { Skeleton } from '@/components/ui/skeleton';
import { useApiSWR } from '@/hooks/useSWR';
import { TMarket } from '@/types/market.types';
import { useTranslation } from 'react-i18next';
import MarketGridCard from '../dashboard/market-grid-card';

interface RelatedMarketsProps {
  slug: string;
}

export default function RelatedMarkets({ slug }: RelatedMarketsProps) {
  const { t } = useTranslation();

  const { data, isLoading } = useApiSWR<TMarket[]>(
    slug ? `/markets/${slug}/related` : null,
  );

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        {[1, 2, 3].map((i) => (
          <Skeleton key={i} className="h-44 rounded-2xl" />
        ))}
      </div>
    );
  }

  if (!data || data.length === 0) return null;

  return (
    <div>
      <h2 className="mb-4 text-base font-medium">{t('Related Markets')}</h2>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        {data.map((market) => (
          <MarketGridCard key={market.id} market={market} />
        ))}
      </div>
    </div>
  );
}