import React from 'react'
import '../tailwind.css'

import { classNames } from '../utils/css'
import { NextImage } from '..'

export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

export interface AvatarProps {
  /** URL for the image */
  source: string | any
  /** Alt text for the image */
  alt: string
  /* Controls the avatar size */
  size?: Size
}

const styles = {
  base: 'relative inline-block rounded-full',
  xxs: 'h-6 w-6',
  xs: 'h-8 w-8',
  sm: 'h-10 w-10',
  md: 'h-12 w-12',
  lg: 'h-14 w-14',
  xl: 'h-16 w-16'
}

export const Avatar = ({ source, alt, size, ...any }: AvatarProps) => {
  const className = classNames(
    styles.base,
    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
  )

  const isInternalPath = (value: string) => value.startsWith('/')

  const imageMarkup = isInternalPath(source) ? (
    <div className={className} {...any}>
      <NextImage source={source} alt={alt} layout="fill" rounded />
    </div>
  ) : (
    <img className={className} src={source} alt={alt} {...any} />
  )

  return <>{imageMarkup}</>
}
