import React from 'react'
import { Card, Container, Grid, Image, Text } from "@nextui-org/react";
import { Link } from '@inertiajs/inertia-react';
import { usePage } from '@inertiajs/inertia-react';

const CartDetails = () => {
    const {cartItems, auth} = usePage().props;
return (
    <div>
    {
    auth.user && (
    <>
    <Container style={{ backgroundColor: '#f7f7f7', padding: '10px' }} >
        <Text css={{ d: 'inline' }} h3> Cart Items </Text>
        <Link href={route('checkout')}> Checkout </Link>
    </Container>
    {cartItems.length > 0 ? cartItems.map((item, index) => (
        <Card key={index} css={{ m: '1rem', mw: '300px' }}>
            <Card.Body>
                <Card.Image
                alt={item.name}
                src={item.photo}
                width="150px"
                height="150px"
                objectFit='contain'
                />
            </Card.Body>
            <Card.Footer css={{ flexDirection: 'column', textAlign: 'center' }}>
                <Text h5> {item.name} </Text>
                <Text b css={{ color: "$accents8" }}>Color: {item.selectedColor}</Text>
                <Text b css={{ color: "$accents8" }}>Size: {item.selectedSize}</Text>
                <Link icon color="primary" href={route('cart-delete', item.id)} > Remove This Item. </Link>
            </Card.Footer>
        </Card>
        )) :  <Text h4 style={{ padding: '1rem' }} > No Items in the Cart </Text>
    }
    </>  
    )
    }
    </div>
  )
}

export default CartDetails