import React, {useState} from 'react';
import './CreateClass.css';
import { Tooltip, Typography, Button } from 'antd';
import { DeleteTwoTone, EditTwoTone, EyeOutlined, EyeFilled } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const Lmao = (props) => {
    const [viewActive, setViewActive] = useState(false);

    function handleView() {
        setViewActive(true);
        // console.log(props.details)
        props.viewButton(props.details.id, props.idx);
    }

    return (
        <div className='class-card-info'>
            <div className='title'>
                <Typography.Text style={{ fontSize: 12 }}>Class Name</Typography.Text>
                <span><Typography.Text strong style={{width: 150}} ellipsis={true}>{props.classTitle}</Typography.Text></span>
            </div>
            <div className='view-section'>
                <Button onClick={handleView} icon={props.viewState? <EyeFilled />:<EyeOutlined />} type={"ghost"}>View</Button>
            </div>
            <div className='action-buttons'>
                <Tooltip title={"Delete"}>
                    <Link onClick={() => {
                            props.deleteButton(props.idx, props.classTitle)
                        }}
                        to="#"
                    >
                        <DeleteTwoTone />
                    </Link>
                </Tooltip>
                <Tooltip title={"Edit"}>
                    <Link style={{ float: "right" }}
                        to={{
                            pathname: "/class",
                            state: props.details,
                        }}
                    >
                        <EditTwoTone />
                    </Link>
                </Tooltip>
            </div>
        </div>
    );
}

export default Lmao;
