import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { Href, ImagePath, NewOrder, Processing } from "@/Constant";
import { OrderData } from "@/Data/Application/Ecommerce";
import { useState } from "react";
import { X } from "react-feather";
import { Rating } from "react-simple-star-rating";
import { Button, Card, CardBody, Col, Media, Row } from "reactstrap";

const NewOrders = () => {
  const [newOrder,setNewOrder]=useState(OrderData)
  const deleteHandler = (id: number) => {
    const newData = newOrder.filter((item) => item.id !== id);
    setNewOrder([...newData]);
  }

  return (
    <Card>
      <CommonCardHeader title={NewOrder} />
      <CardBody>
        <Row className="g-sm-4 g-3">
          {newOrder.map((item, index) => (
            <Col xxl="4" md="6" key={index}>
              <div className="prooduct-details-box">
                <Media>
                  <img className="align-self-center ms-3 rounded-3 img-fluid img-70" src={`${ImagePath}/ecommerce/${item.image}`} alt={item.name} />
                  <Media body className="ms-3">
                    <div className="product-name">
                      <h6><a href={Href}>{item.name}</a></h6>
                    </div>
                    <Rating initialValue={5} size={17} className="mt-1" />
                    <div className="price d-flex">
                      <div className="text-muted">Price &nbsp;</div> : 210$
                    </div>
                    <div className="avaiabilty">
                      <div className="text-success">In stock</div>
                    </div>
                    <Button tag="a" color="primary" size="xs" href={Href}>{Processing}</Button>
                    <X className="close" onClick={() => deleteHandler(item.id)} />
                  </Media>
                </Media>
              </div>
            </Col>
          ))}
        </Row>
      </CardBody>
    </Card>
  );
};

export default NewOrders;