import { Row, Col, Card, CardBody } from "reactstrap";
import CountUp from "react-countup";
import ProfitAndLoss from "./ProfitAndLoss";
import { TicketData } from "@/Data/Miscellaneous/SupportTicket";

const TicketList = ({ data }: { data: any }) => {
  const pendingtickets = data.filter(item => item.status == 'pending')
  const Data: any = [
    {
      title: "Total",
      num: data.length,
      class: "bg-secondary",
    },
    {
      title: "Pending",
      num: data.filter((item: any) => item.status == 'pending').length,
      class: "bg-secondary",
    },
    {
      title: "Open",
      num: data.filter((item: any) => item.status == 'open').length,
      class: "bg-warning",
    },
    {
      title: "Closed",
      num: data.filter((item: any) => item.status == 'closed').length,
      class: "bg-success",
    },
  ]
  return (
    <Row>
      {Data.map((item, index) => (
        <Col md="3" className="box-col-6" key={index}>
          <Card className="ecommerce-widget">
            <CardBody className="support-ticket-font">
              <Row>
                <Col xs="5">
                  <span>{item.title}</span>
                  <h3 className="total-num counter">
                    <CountUp end={item.num} className="mb-1" delay={1} />
                  </h3>
                </Col>
              </Row>
              <div className="progress-showcase">
                <div className="progress sm-progress-bar">
                  <div className={`progress-bar ${item.class}`} style={{ width: "70%" }}></div>
                </div>
              </div>
            </CardBody>
          </Card>
        </Col>
      ))}
    </Row>
  );
};
export default TicketList;