import React, { useRef, useEffect } from 'react';
import { tokenPacks } from '../../constants/tokenPacks';
import TokenPackCard from './TokenPackCard';
import styles from './TokenPacksList.module.css';

interface TokenPacksListProps {
  onBuyPack: (packId: string) => void;
  className?: string;
  compact?: boolean;
}

const TokenPacksList: React.FC<TokenPacksListProps> = ({
  onBuyPack,
  className = '',
  compact
}) => {
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (compact && listRef.current) {
      const secondCard = listRef.current.children[1] as HTMLElement;
      if (secondCard) {
        listRef.current.scrollTo({
          left: secondCard.offsetLeft,
          behavior: 'smooth',
        });
      }
    }
  }, [compact]);

  return (
    <div className={`${styles.container} ${className}`}>
      <h2 className={styles.title}>Пакеты токенов</h2>
      <div
        className={`${styles.list} ${compact ? styles.horizontalScroll : ''}`}
        ref={listRef}
      >
        {tokenPacks.map(pack => (
          <TokenPackCard
            key={pack.id}
            {...pack}
            compact={compact}
            onBuy={() => onBuyPack(pack.id)}
          />
        ))}
      </div>
    </div>
  );
};

export default TokenPacksList;
