import './card-proj-edit.css';
import { EditStepEnum, IProjEdit } from "../../interfaces/card/ICardProj.ts";
import { useEffect } from 'react';
export default function CardProjEdit(props: IProjEdit) {
    useEffect(()=>{
        
    })
    const renderBtn = () => {
        if (props.canBtnClick == false) {
            return <a href="/#" className="edit noEdit" style={{color: '#c2c2c2',textDecoration:'none'}} onClick={(e) => {
                e.preventDefault();
            }}>{props.btnName ? props.btnName : '编辑'}</a>
        } else {
            return <a href="/#" className="edit" onClick={(e) => {
                e.preventDefault();
                props.handleEdit();
            }}>{props.btnName ? props.btnName : '编辑'}</a>
        }
        // if (props.canBtnClick == false) {
        //     return <a href="/#" className="edit" style={{ color: 'var(--color-border)' }} onClick={(e) => {
        //         e.preventDefault();
        //     }}>编辑</a>
        // } else {
        //     return <a href="/#" className="edit" onClick={(e) => {
        //         e.preventDefault();
        //         props.handleEdit();
        //     }}>编辑</a>
        // }
    }

    return (
        // props.step === 1 ? 'complete-one' : props.step === 2 ? 'complete-two' : props.step === 3 ? 'complete-three' : props.step === 4 ? 'complete-four' : ''
        <div className="card-proj-edit" style={{background:props.background,boxShadow:props.shadow}}>
        {/* <div className={ }> */}
            <div className='card-proj-edit-text'>
                <div className="title">{props.title}</div>
                <div className="desc">{props.desc}</div>
            </div>
            <div className="option">
                {props.status == EditStepEnum.EDITED ? <span className="status"></span> : <div></div>}
                {renderBtn()}

            </div>
            
            <div className='downBoxx'></div>
        </div>
    )
}