import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";

const Card = (props) => {
  return (
    <div className={styles.cardContainer} {...props}>
      <div className={styles.cardDetails}>
        <div className={styles.list}>
          <p>Name</p>
          <p>{props?.data?.name}</p>
        </div>
        <div className={styles.list}>
          <p>CPU Used/Limit</p>
          <p>
            <span className={styles.used}>{props?.data?.cpuUsed}</span> /{" "}
            <span className={styles.limit}>{props?.data?.cpuLimit}</span>
          </p>
        </div>
        <div className={styles.list}>
          <p>Memory Used/Limit</p>
          <p>
            <span className={styles.used}>{props?.data?.memoryUsed}</span> /{" "}
            <span className={styles.limit}>{props?.data?.memoryLimit}</span>
          </p>
        </div>
        <div className={styles.list}>
          <p>Storage Used/Limit</p>
          <p>
            <span className={styles.used}>{props?.data?.storageUsed}</span> /{" "}
            <span className={styles.limit}>{props?.data?.storageLimit}</span>
          </p>
        </div>
        <div className={styles.list}>
          <p>Date Created</p>
          <p>{props?.data?.dateCreated}</p>
        </div>
      </div>
      <div className={styles.cardAction}>
        <DeleteIcon />
      </div>
    </div>
  );
};

export default Card;
