import React from "react";
import { Link } from "react-router";
import { nameShorten } from "../utils/string-helper";
import { ICoinMarketData } from "../utils/interfaces";

interface ICoin {
    coin: ICoinMarketData;
}

const CoinCard: React.FC<ICoin> = ({ coin }) => {

    return (
        <Link to={`/coin/${coin.id}`} >
            <div className="coin-card">
                <div className="coin-header">
                    <img src={coin.image} alt={coin.name} className="coin-image" />
                    <h2>{nameShorten(coin.name)}</h2>
                    <p className="symbol">{coin.symbol.toUpperCase()}</p>
                </div>
                <p>
                    Price: <span>$ {coin.current_price.toLocaleString()}</span>
                </p>
                <p className={coin.price_change_percentage_24h >= 0 ? 'positive' : 'negative'}>
                    {/* coin.price_change_percentage_24h.toFixed(2) */}
                    {/* {parseFloat(coin?.price_change_percentage_24h || 0).toFixed(2)} */}
                    {coin.price_change_percentage_24h.toFixed(2)} %
                </p>
                <p>
                    Market Cap: <span>{coin?.market_cap.toLocaleString()}</span>
                </p>
            </div>
        </Link>
    );
}


export default CoinCard;