import React from "react";
import { ICoinInfo } from "../utils/interfaces";

interface ICoinInfoProps {
    coin: ICoinInfo;
}

const CoinInfo: React.FC<ICoinInfoProps> = ({ coin }) => {

    return (
        <>
            <h1 className="coin-details-title">
                {coin ? `${coin?.name} ${coin?.symbol.toUpperCase()}` : "Coin Details"}
            </h1>

            {coin && (
                <>
                    <img src={coin?.image_large} alt={coin?.name} className="coin-details-image" />
                    <p className="coin-details-description">
                        {coin?.description?.split(". ")[0] + "."}
                    </p>
                    <div className="coin-details-info">
                        <h3>
                            Rank: <span># {coin.market_cap_rank}</span>
                        </h3>
                        <h3>
                            Current Price: {" "}
                            <span>
                                ${coin.market_data.current_price.toLocaleString()}
                            </span>
                        </h3>
                        <h4>
                            Market Cap:{" "}
                            <span>${coin.market_data.market_cap.toLocaleString()}</span>
                        </h4>
                        <h4>
                            24h High:{" "}
                            <span>${coin.market_data.high_24h.toLocaleString()}</span>
                        </h4>
                        <h4>
                            24h Low:{" "}
                            <span>${coin.market_data.low_24h.toLocaleString()}</span>
                        </h4>
                        <h4>
                            24h Price Change:{" "}
                            <span>
                                ${coin.market_data.price_change_24h.toFixed(2)} (
                                {coin.market_data.price_change_percentage_24h.toFixed(2)}%)
                            </span>
                        </h4>
                        {/*
                        <h4>
                            Circulating Supply:{" "}
                            <span>
                                {coin.market_data.circulating_supply.toLocaleString()}
                            </span>
                        </h4>
                        <h4>
                            Total Supply:{" "}
                            <span>
                                {coin.market_data.total_supply?.toLocaleString() || "N/A"}
                            </span>
                        </h4>
                        */}
                        <h4>
                            All-Time High:{" "}
                            <span>
                                ${coin.market_data.ath.toLocaleString()} on{" "}
                                {new Date(coin.market_data.ath_date).toLocaleDateString()}
                            </span>
                        </h4>
                        <h4>
                            All-Time Low:{" "}
                            <span>
                                ${coin.market_data.atl.toLocaleString()} on{" "}
                                {new Date(coin.market_data.atl_date).toLocaleDateString()}
                            </span>
                        </h4>
                        <h4>
                            Last Updated:{" "}
                            <span>{new Date(coin.last_updated).toLocaleDateString()}</span>
                        </h4>
                    </div>
                </>
            )}
        </>
    );

}


export default CoinInfo;