import { marketPrices } from '@/data/market'

const prices = marketPrices.slice(0, 4)

export default function SnapshotBar() {
  return (
    <div
      style={{
        borderBottom: '2px solid var(--ink)',
        backgroundColor: 'var(--paper-2)',
        direction: 'rtl',
      }}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
        }}
        className="mq-stack-2 max-w-7xl mx-auto w-full px-12 max-md:px-6 max-md:grid-cols-2"
      >
        {prices.map((price, idx) => {
          const isLast = idx === prices.length - 1
          const isUp = price.trend === 'up'
          const isDown = price.trend === 'down'
          const arrow = isUp ? '↑' : isDown ? '↓' : '—'
          const changeColor = isUp
            ? 'var(--green-ink)'
            : isDown
            ? 'var(--red)'
            : 'var(--ink-4)'

          return (
            <div
              key={price.id}
              style={{
                padding: '24px 0',
                borderRight: isLast ? 'none' : '1px solid var(--rule-thin)',
                paddingLeft: idx === 0 ? '0' : '28px',
                paddingRight: idx === prices.length - 1 ? '0' : '28px',
              }}
              className={`max-md:${
                idx % 2 === 1
                  ? 'border-r-0'
                  : idx < 2
                  ? 'border-b border-[var(--rule-thin)]'
                  : ''
              }`}
            >
              {/* Label */}
              <div
                style={{
                  fontSize: 11,
                  textTransform: 'uppercase',
                  letterSpacing: '2px',
                  color: 'var(--ink-5)',
                  marginBottom: 8,
                  fontWeight: 700,
                }}
              >
                {price.name}
              </div>

              {/* Value */}
              <div
                style={{
                  fontSize: '22px',
                  fontWeight: 900,
                  letterSpacing: '-0.5px',
                  color: 'var(--ink)',
                  lineHeight: 1.1,
                  marginBottom: '4px',
                }}
              >
                {price.value.toLocaleString('fa-IR')}
              </div>

              {/* Change row */}
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px',
                }}
              >
                <span
                  style={{
                    fontSize: '11px',
                    fontWeight: 700,
                    color: changeColor,
                  }}
                >
                  {arrow}{' '}
                  {Math.abs(price.changePercent).toLocaleString('fa-IR', {
                    minimumFractionDigits: 1,
                    maximumFractionDigits: 1,
                  })}
                  ٪
                </span>
                <span
                  style={{
                    fontSize: '10px',
                    color: 'var(--ink-4)',
                    fontWeight: 400,
                  }}
                >
                  {price.unit}
                </span>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}