import { Card, Button, Container, Row, Col } from 'react-bootstrap';

import {Link} from 'react-router-dom';

// import AOS from 'aos';

export default function ProductCard({prodProp, data}) {
    
    const {_id, name, description, price, image} = (prodProp || data);
    // Convert to local currency
    const convertPrice = price.toLocaleString('fil-PH', {
      style: 'currency',
      currency: 'PHP',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });

   return (
        <Container>
            <Row>
                <Col>
                    <Card className = 'm-5 col-10 mx-auto fs-5 border-dark' id = "productComponent1">
                    <div className = "row">
                        <Card.Body className = "col-7 p-5">
                            <Card.Title className = 'fs-4 headers' >{name}</Card.Title>
                            <Card.Subtitle>Description:</Card.Subtitle>
                                <Card.Text>{description}</Card.Text>
                            <Card.Subtitle>Price:</Card.Subtitle>
                            <Card.Text>{convertPrice}</Card.Text>
                            <Button as = {Link} to = {`/products/${_id}`} variant="primary" className = "nes-btn btn-submit" >Details</Button>
                        </Card.Body>
                        <div className = "col-5 d-flex justify-content-center align-items-center">
                            { image ? <img src = {`${process.env.REACT_APP_IMAGE_FOLDER}/`+image.imageName} alt = "" className = "img-fluid"/>
                            : <h1 className = "text-center col-6" >Product image unavailable</h1>
                            }
                        </div>
                    </div>
                    </Card>
                </Col>
            </Row>
        </Container>
    )
}