wgp-next-shop-ui-lib/src/components/Media/PayList/PayList.jsx

Библиотека UI-компонентов для Next-Shop с поддержкой e-commerce функций

'use client';

const PayList = ({ 
  title = "Способы оплаты",
  paymentMethods = [],
  customStyles = {},
  onMethodClick = () => {}
}) => {
  const defaultMethods = [
    { id: 'card', name: 'Банковская карта123', icon: '💳' },
    { id: 'cash', name: 'Наличные', icon: '💵' },
    { id: 'bank', name: 'Банковский перевод', icon: '🏦' },
    { id: 'online', name: 'Онлайн платежи', icon: '💻' }
  ];

  const methods = paymentMethods.length > 0 ? paymentMethods : defaultMethods;

  return (
    <div className={`payment-list ${customStyles.container || ''}`}>
      <h3 className={`text-lg font-semibold mb-4 ${customStyles.title || ''}`}>
        {title}
      </h3>
      <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ${customStyles.grid || ''}`}>
        {methods.map((method) => (
          <div
            key={method.id}
            onClick={() => onMethodClick(method)}
            className={`
              flex items-center p-4 border rounded-lg cursor-pointer 
              hover:bg-gray-50 hover:border-blue-300 transition-all
              ${customStyles.item || ''}
            `}
          >
            <span className="text-2xl mr-3">{method.icon}</span>
            <span className="font-medium">{method.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PayList;