import React, { Fragment } from 'react';
import Link from 'next/link';
import { ProtocolData } from 'data/types';
import { ChevronRight } from 'react-feather';

interface BundleItemRowProps {
  item: ProtocolData;
  yearly?: boolean;
}

const BundleItemRow: React.FC<BundleItemRowProps> = ({ item, yearly }) => {
  return (
    <Fragment>
      <Link href={`/protocol/${item.id}`}>
        <a
          className="bundle-item"
          style={{
            backgroundImage: item.icon ? `url('${item.icon}')` : undefined,
          }}
        >
          <div className="name">{item.subtitle}</div>
          <div className="amount">
            {item.oneDay?.toLocaleString('en-US', {
              style: 'currency',
              currency: 'USD',
            })}
          </div>
          {!yearly && (
            <div className="amount">
              {item.sevenDayMA?.toLocaleString('en-US', {
                style: 'currency',
                currency: 'USD',
              })}
            </div>
          )}
          <div className="arrow">
            <ChevronRight />
          </div>
        </a>
      </Link>
      <style jsx>{`
        .bundle-item {
          display: flex;
          background-repeat: no-repeat;
          background-position: 10px center;
          background-size: 20px 20px;
          padding: 4px;
          text-decoration: none;
          background-color: #eee;
        }
        .bundle-item:hover {
          background-color: #dddddd;
        }
        .name {
          padding-left: 32px;
          flex: 1;
        }
        .amount {
          min-width: 200px;
          text-align: right;
          font-family: 'Noto Sans TC', sans-serif;
        }
        .arrow {
          padding: 0 4px;
          height: 24px;
          opacity: 0.7;
        }

        @media (max-width: 700px) {
          .amount {
            font-size: 14px;
            min-width: 110px;
            padding-left: 8px;
          }

          .item {
            padding-left: 30px;
            background-position: 6px center;
          }

          .arrow {
            padding: 0 2px;
          }
        }
      `}</style>
    </Fragment>
  );
};

export default BundleItemRow;