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

const BatchCard = (props) => {
    return (
        <div className='batch-card-info'>
            <div className='title'>
                <Typography.Text style={{ fontSize: 12 }}>Batch Name</Typography.Text>
                <span><Typography.Text strong style={{width: 150}} ellipsis={true}>{props.batchTitle}</Typography.Text></span>
            </div>
            <div className='student-amount'>
                <Typography.Text style={{ fontSize: 12 }}>No. of students</Typography.Text>
                <span><Typography.Text strong>{props.studentNumber}</Typography.Text></span>
                <Button onClick={() => props.onView(props.details)} type='ghost' icon={<EyeFilled />}>View</Button>
            </div>
            <div className='action-buttons'>
                <Tooltip title={"Delete"}>
                    <Link onClick={() => {
                        props.handleDelete(props.idx, props.batchTitle, props.studentNumber)
                    }}
                        // style={{ float: "right", marginLeft: "2%" }}
                        to="#"
                    >
                        <DeleteTwoTone />
                    </Link>
                </Tooltip>
                <Tooltip title={"Edit"}>
                    <Link style={{ float: "right" }}
                        to={{
                            pathname: "/createbatch",
                            state: props.details,
                        }}
                    >
                        <EditTwoTone />
                    </Link>
                </Tooltip>
            </div>
        </div>
    );
}

export default BatchCard;
