import { useState } from "react";
import { Link } from "react-router-dom";
import catchErrors from "../../utils/catchErrors.js";
import styles from "./schedule.module.scss";

const ScheduleItem = () => {
    const [error, setError] = useState("")

    async function delSchedule () {
        try {
            setError("")
            alert("해당 일정을 성공적으로 삭제하였습니다.")
            window.location.reload()
        } catch (error) {
            catchErrors(error, setError)
        }
    }

    return (
        <div className="accordion-item border-bottom-0">
            <button className={`d-flex flex-column align-items-start accordion-button collapsed bg-white shadow-none px-0 ${styles.activeBtn}`} type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                <h5 className={`accordion-header ${styles.title}`} id="flush-headingOne">
                    Accordion Item #1sadsadsadasdsadsadasasadsad
                </h5>
                <p className={`text-secondary mb-0 ${styles.time}`}>sadsadsdsadsadsaf</p>
                <p className={`mb-0 ${styles.period}`}>2021.01.151 ~ 2021.09.35</p>
            </button>
            <div id="flush-collapseOne" className="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#scheduleList">
                <div className={`accordion-body text-break px-0 pt-2 ${styles.textBox}`}>
                    <div className="d-flex align-items-start">
                        <i className="col bi bi-geo-alt fs-5"></i>
                        <div className="col-11">
                            sadsadsadsa
                        </div>
                    </div>
                    dlkasjflsajflasjflsakfjlsajflalsafjsask<br />fjlakdjflajflaksjlksajdlksajdslkafjlsakflksjflasjflksjslakjflsakjflsajflsakjlasjflksajlfsja
                    <div className="d-flex justify-content-end mt-2">
                        <Link className="btn btn-white btn-sm border-dark" to="/schedule/edit">수정</Link>
                        <button type="button" className="btn btn-crimson btn-sm ms-2" onClick={delSchedule}>삭제</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ScheduleItem