import React from 'react';

interface CalloutCardProps {
  iconUrl: string;
  token: string;
  ca: string;
  priceAtCreation: number;
  priceNow: number;
  gains: number;
  dexUrl: string;
}

const CalloutCard: React.FC<CalloutCardProps> = ({
  iconUrl,
  token,
  ca,
  priceAtCreation,
  priceNow,
  gains,
  dexUrl
}) => {
  const truncateAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-5)}`;
  };

  return (
    <a href={dexUrl} target="_blank"
    rel="noopener noreferrer"
    className="block">
        <div className={`glassmorphism rounded-full m-2 grid grid-cols-4 h-20 max-w-96 flex justify-center`}>
        <img src={iconUrl} className="rounded-full m-2 flex h-16 w-16" />
        <div className='grid grid-rows-2'>
            <div className='items-end justify-start text-center flex font-bold'>
            {token}
            </div>
            <p className='text-xs items-start mt-1 flex justify-start ml-1'>
            {truncateAddress(ca)}
            </p>
        </div>
        <div className='grid grid-rows-2 col-span-2 justify-end mx-5'>
            <p className='items-end flex text-xs text-nowrap mb-1'>{`$${priceAtCreation} => $${priceNow}`}</p>
            <p className={`justify-end flex 00 font-bold ${gains > 0 ? 'text-green-700' : 'text-red-700'}`}>{`${(gains * 100).toFixed(2)}%`}</p>
        </div>
        </div>
    </a>
  );
};

export default CalloutCard;