import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Col } from 'react-bootstrap';
import { Cart } from 'react-bootstrap-icons';
import imgPlaceholder from '../../../assets/placeholder.jpg';
import './LineTableRow.css';

const LinesTableRow = ({ line, onAddCart, toInfoPage }) => {
    const handleAnchorClick = (event, action) => {
        event.preventDefault();
        action();
    };
    const price = <p className='price_of_game_main_page'>{parseFloat(line.price).toFixed(0)} руб.</p>;

    return (
        <tr>
            <td className = 'align-middle p-0 cell1_main_page'>
                <img src={line.image || imgPlaceholder} className='img-fluid w-100 h-100' alt='image of game'></img> 
            </td>
            <td className = 'align-middle p-0 cell2_main_page'>
            <Link className = 'nav-link active name_of_game_main_page' onClick={(event) => handleAnchorClick(event, toInfoPage)}> {line.title} </Link>
                {price}
            </td>
            <td className = 'align-middle p-0'>
                <p className = 'genre_of_game_main_page ms-5 me-5'> {line.type.name} </p>
            </td>
            <td className='text-center align-middle p-0'>
               <Col className='text-center mt-3'> <a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a> </Col>
           </td>
        </tr>
    );
    // return (
    //     <tr className='w-100'>
    //     <td className = 'align-middle ms-5 cell1_main_page'>
    //         <img src={line.image} className='cell3_main_page' alt='image'></img>
    //     </td>
    //     <td className = 'align-middle ms-5 me-5 cell1_main_page'>
    //         <Link className = 'nav-link active name_of_game_main_page'> {line.title} </Link>
    //         {price};
    //         {/* <p className='price_of_game_main_page mt-4 ms-5 me-5'> {parseFloat(line.price).toFixed(0)} &#8381; </p> */}
    //     </td>
    //     <td className = 'align-middle ps-2 pe-5 text-center'>
    //         <p className = 'genre_of_game_main_page'> {line.type.name} </p>
    //     </td>
    //     <td className = 'align-middle ms-5 me-5 cell1_main_page'>
    //         <p className="card-text textlinkBut"> {(line.description)} </p>
    //     </td>
    //     <td className='cell1_main_page'>
    //         <Col className='text-center mt-3'> <a href="#" onClick={(event) => handleAnchorClick(event, onAddCart)}><Cart /></a> </Col>
    //     </td>
    // </tr>
    // );
};

LinesTableRow.propTypes = {
    index: PropTypes.number,
    line: PropTypes.object,
    onAddCart: PropTypes.func,
    toInfoPage: PropTypes.func,
};

export default LinesTableRow;