import React from 'react'
import '../tailwind.css'
import { classNames } from '../utils/css'

export interface IconProps {
  /** The HeroIcon component */
  source: React.ReactNode
  /* Controls the icon size */
  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
  /* Controls the icon color */
  color?: 'base' | 'subdued' | 'negative' | 'positive' | 'primary'
}

const styles = {
  xxs: 'h-5 w-5',
  xs: 'h-6 w-6',
  sm: 'h-8 w-8',
  md: 'h-10 w-10',
  lg: 'h-12 w-12',
  xl: 'h-14 w-14',
  xl2: 'h-16 w-16',
  baseColor: 'text-primary-text',
  subdueColor: 'text-disabled-text',
  negativeColor: 'text-negative-text',
  positiveColor: 'text-positive-text',
  primaryColor: 'text-link-text'
}

export const Icon = ({ source, size, color }: IconProps) => {
  const className = classNames(
    size === 'xxs' && styles.xxs,
    size === 'xs' && styles.xs,
    !size || (size === 'sm' && styles.sm),
    size === 'md' && styles.md,
    size === 'lg' && styles.lg,
    size === 'xl' && styles.xl,
    size === '2xl' && styles.xl2,
    !color || (color === 'base' && styles.baseColor),
    color === 'subdued' && styles.subdueColor,
    color === 'negative' && styles.negativeColor,
    color === 'positive' && styles.positiveColor,
    color === 'primary' && styles.primaryColor
  )

  return <div className={className}>{source}</div>
}
