import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { Trophy } from 'lucide-react';

import { useStore } from '../hooks/useStore';
import { Link } from 'react-router-dom';

function Banner() {
    const { dataWebsite, dataTopDeposit } = useStore();
    const sliderSettings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
    };

    const topDonors = dataTopDeposit;

    return (
        <div className="py-6">
            <div className="container mx-auto px-4">
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                    {/* Left Side: Slider */}
                    <div className="lg:col-span-8 rounded-lg overflow-hidden shadow-lg">
                        <Slider {...sliderSettings}>
                            {dataWebsite?.banner && dataWebsite?.banner.length > 0 ? (
                                dataWebsite.banner.map((bannerUrl, index) => (
                                    <div key={index}>
                                        <img
                                            src={`${bannerUrl}`}
                                            alt={`Banner ${index + 1}`}
                                            className="w-full h-[450px] object-cover"
                                        />
                                    </div>
                                ))
                            ) : (
                                <>
                                    <div>
                                        <img
                                            src="https://cdn-media.sforum.vn/storage/app/media/wp-content/uploads/2022/03/af27d9b51d9b2bbb0cd82fd9a9f67e78-1.jpg"
                                            alt="Slide 1"
                                            className="w-full h-[450px] object-cover"
                                        />
                                    </div>
                                    <div>
                                        <img
                                            src="https://cdn.brvn.vn/news/1280px/2020/21146_21146_LienQuanMobile_Ava_2.jpg"
                                            alt="Slide 2"
                                            className="w-full h-[450px] object-cover"
                                        />
                                    </div>
                                </>
                            )}
                        </Slider>
                    </div>

                    {/* Right Side: Top Deposit */}
                    <div className="lg:col-span-4 bg-white rounded-lg shadow-lg flex flex-col h-full">
                        <div className="bg-yellow-500 rounded-t-lg p-4 text-center">
                            <h2 className="text-white font-bold text-lg uppercase flex items-center justify-center gap-2">
                                <Trophy size={20} /> TOP Nạp Tháng 01
                            </h2>
                        </div>

                        <div className="p-4 flex-1 flex flex-col justify-between">
                            <div className="space-y-3">
                                {topDonors.map((donor, index) => (
                                    <div
                                        key={index}
                                        className="flex items-center justify-between border border-orange-200 rounded px-4 py-2 text-sm font-semibold"
                                    >
                                        <div className="flex items-center gap-2">
                                            <span
                                                className={`
                                                flex items-center justify-center w-5 h-5 rounded-full text-xs text-white
                                                ${
                                                    index === 0
                                                        ? 'bg-red-500'
                                                        : index === 1
                                                          ? 'bg-orange-500'
                                                          : index === 2
                                                            ? 'bg-yellow-500'
                                                            : 'bg-gray-400'
                                                }
                                            `}
                                            >
                                                {donor.rank}
                                            </span>
                                            <span className="text-orange-500">{donor.email}</span>
                                        </div>
                                        <span className="text-red-600">+{donor.totalDeposit.toLocaleString()}</span>
                                    </div>
                                ))}
                            </div>
                            <Link to="/deposit/bank">
                                <button className="w-full mt-4 bg-gradient-to-r from-yellow-400 to-orange-500 text-white font-bold py-3 rounded uppercase text-sm shadow hover:from-yellow-500 hover:to-orange-600 transition-all">
                                    Nạp Tiền Ngay
                                </button>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Banner;
