'use client';
import { Button } from 'primereact/button';
import React, { useState } from 'react';

function ProductList() {
    const [products] = useState([
        {
            price: '$140.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-1.png'
        },
        {
            price: '$82.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-2.png'
        },
        {
            price: '$54.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-3.png'
        },
        {
            price: '$72.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-4.png'
        },
        {
            price: '$99.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-5.png'
        },
        {
            price: '$89.00',
            image: 'demo/images/ecommerce/product-list/product-list-4-6.png'
        }
    ]);

    const [products2, setProducts2] = useState([
        {
            color: 'Bluegray',
            image: 'demo/images/ecommerce/product-list/product-list-2-1.png'
        },
        {
            color: 'Indigo',
            image: 'demo/images/ecommerce/product-list/product-list-2-2.png'
        },
        {
            color: 'Green',
            image: 'demo/images/ecommerce/product-list/product-list-2-3.png'
        },
        {
            color: 'Blue',
            image: 'demo/images/ecommerce/product-list/product-list-2-4.png'
        }
    ]);

    const onColorChange = (color: string, productIndex: number) => {
        const _products2 = [...products2];
        _products2[productIndex]['color'] = color;
        setProducts2(_products2);
    };

    return (
        <>
            <div className="card">
                <div className="text-900 font-medium text-4xl mb-4">Popular Products</div>
                <p className="mt-0 p-0 mb-5 text-700 text-2xl">Exclusive Selection</p>
                <div className="grid -mt-3 -ml-3 -mr-3">
                    {products.map((product, i) => {
                        return (
                            <div key={i} className="col-12 md:col-6 lg:col-4">
                                <div className="p-2">
                                    <div className="shadow-2 p-4 surface-card border-round">
                                        <div className="relative mb-3">
                                            <span
                                                className="surface-card text-900 shadow-2 px-3 py-2 absolute"
                                                style={{
                                                    borderRadius: '1.5rem',
                                                    left: '1rem',
                                                    top: '1rem'
                                                }}
                                            >
                                                Category
                                            </span>
                                            <img src={'/' + product.image} className="w-full" alt={i.toString()} />
                                        </div>
                                        <div className="flex justify-content-between align-items-center mb-3">
                                            <span className="text-900 font-medium text-xl">Product Name</span>
                                            <span>
                                                <i className="pi pi-star-fill text-yellow-500 mr-1"></i>
                                                <span className="font-medium">5.0</span>
                                            </span>
                                        </div>
                                        <p className="mt-0 mb-3 text-700 line-height-3">Enim nec dui nunc mattis enim ut tellus. Tincidunt arcu.</p>
                                        <span className="text-primary text-xl font-medium">{product.price}</span>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>

            <div className="card">
                <div className="grid -mt-3 -ml-3 -mr-3">
                    {products2.map((product, i) => {
                        return (
                            <div key={i} className="col-12 md:col-6 lg:col-3 mb-5 lg:mb-0">
                                <div className="mb-3 relative">
                                    <img src={'/' + product.image} className="w-full" alt={i.toString()} />
                                    <Button
                                        type="button"
                                        className="border-1 border-white border-round py-2 px-3 absolute bg-black-alpha-30 text-white inline-flex align-items-center justify-content-center hover:bg-black-alpha-40 transition-colors transition-duration-300 cursor-pointer"
                                        style={{
                                            bottom: '1rem',
                                            left: '1rem',
                                            width: 'calc(100% - 2rem)'
                                        }}
                                    >
                                        <i className="pi pi-shopping-cart mr-3 text-base"></i>
                                        <span className="text-base">Add to Cart</span>
                                    </Button>
                                </div>
                                <div className="flex flex-column align-items-center">
                                    <span className="text-xl text-900 font-medium mb-3">Product Name</span>
                                    <span className="text-xl text-900 mb-3">$150.00</span>
                                    <div className="flex align-items-center mb-3">
                                        <div
                                            className="w-2rem h-2rem flex-shrink-0 border-circle bg-bluegray-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
                                            style={{
                                                width: '1.2rem',
                                                height: '1.2rem',
                                                boxShadow: product.color === 'Bluegray' ? '0 0 0 0.2rem var(--bluegray-500)' : undefined
                                            }}
                                            onClick={() => onColorChange('Bluegray', i)}
                                        ></div>
                                        <div
                                            className="w-2rem h-2rem flex-shrink-0 border-circle bg-indigo-500 hover:border-indigo-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
                                            style={{
                                                width: '1.2rem',
                                                height: '1.2rem',
                                                boxShadow: product.color === 'Indigo' ? '0 0 0 0.2rem var(--indigo-500)' : undefined
                                            }}
                                            onClick={() => onColorChange('Indigo', i)}
                                        ></div>
                                        <div
                                            className="w-2rem h-2rem flex-shrink-0 border-circle bg-purple-500 hover:border-purple-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
                                            style={{
                                                width: '1.2rem',
                                                height: '1.2rem',
                                                boxShadow: product.color === 'Green' ? '0 0 0 0.2rem var(--purple-500)' : undefined
                                            }}
                                            onClick={() => onColorChange('Green', i)}
                                        ></div>
                                        <div
                                            className="w-2rem h-2rem flex-shrink-0 border-circle bg-cyan-500 hover:border-cyan-500 cursor-pointer border-2 surface-border transition-all transition-duration-300"
                                            style={{
                                                width: '1.2rem',
                                                height: '1.2rem',
                                                boxShadow: product.color === 'Blue' ? '0 0 0 0.2rem var(--cyan-500)' : undefined
                                            }}
                                            onClick={() => onColorChange('Blue', i)}
                                        ></div>
                                    </div>
                                    <span className="text-700">{product.color}</span>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </>
    );
}

export default ProductList;