import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchBrands } from '../store/slices/brandsSlice';
import { Card } from 'react-bootstrap';
import { Folders, Hash, Link, Users } from 'lucide-react';
import SpinningComponent from './SpinningComponent';

export default function BrandsList({ openBrandDetail }) {
    const { brands, status, error } = useSelector((state) => state.brands);
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(fetchBrands());
    }, [dispatch]);

    if (status === 'loading') {
        return <SpinningComponent />;
    }
    
     // 如果加载失败，显示错误信息
     if (status === 'failed') {
        return <div className='alert alert-danger'>{error || 'Failed to load brands. Please try again later.'}</div>;
    }


    return (
        <div className='brands-list'>
            {brands?.length > 0 && brands.map((brand) => (
                <div className='brand-card shadow-xs' key={brand.id} onClick={() => openBrandDetail(brand)}>
                    <Card.Body>
                        <Card.Title className='text-primary fw-bold'>
                            <span className='card-logo'>{brand.name.slice(0, 1)}</span>
                            {brand.name.toUpperCase()}
                        </Card.Title>
                        <Card.Text className=''>
                            <span className='card-text-title'>
                                <Folders size={16} />
                                Category
                            </span>
                            <span className='card-text-content'>{brand.category}</span>
                        </Card.Text>
                        <Card.Text className=''>
                            <span className='card-text-title'>
                                <Hash size={16} />
                                Collab.
                            </span>
                            <span className='card-text-content'>{brand.collab_count}</span>
                        </Card.Text>
                        <Card.Text className=''>
                            <span className='card-text-title'>
                                <Users size={16} />
                                Creators
                            </span>
                            <span className='card-text-content'>{brand.creators_count}</span>
                        </Card.Text>
                        <Card.Text className=''>
                            <span className='card-text-title'>
                                <Link size={16} />
                                Source
                            </span>
                            <span className='card-text-content'>{brand.source}</span>
                        </Card.Text>
                    </Card.Body>
                </div>
            ))}
        </div>
    );
}