import React from "react";
import { Card, CardText, CardBody } from "reactstrap";
import styles from "./GuidesCard.module.scss";
import { Button } from "reactstrap";

export const GuidesCard = ({ data, actions }) => {
  const { description, id, image: img, title, url } = data;
  const { deleteGuide, toggleEdit } = actions;
  // const [isEditOpen, setIsEditOpen] = useState(false);

  // const toggleEdit = () => {
  //   setIsEditOpen(!isEditOpen);
  // };

  return (
    <div>
      <Card className={styles.guidesCard}>
        <CardBody>
          <CardText className={styles.guidesTitle}>{title}</CardText>
          <CardText className={styles.guidesDescription}>
            {description}
          </CardText>
          <CardText className={styles.guidesLink}>
            <a href={url}>Read more</a>
          </CardText>
          <img className={styles.guidesImage} src={img} alt={description} />
        </CardBody>
      </Card>
      <div className={styles.space}></div>
      <div className="modal-footer">
        <Button className={styles.editButton} onClick={() => toggleEdit(data)}>
          Edit
        </Button>
        <Button className={styles.deleteButton} onClick={() => deleteGuide(id)}>
          Delete
        </Button>
      </div>
    </div>
  );
};
