import React from 'react'

interface RedditIconProps {
  width?: number | string
  height?: number | string
  className?: string
  variant?: 'original' | 'grayscale' | 'white'
}

export function RedditIcon({
  width = 24,
  height = 24,
  className = "text-current",
  variant = 'grayscale'
}: RedditIconProps) {
  // Color scheme based on variant
  let colors;
  switch (variant) {
    case 'original':
      colors = {
        background: '#FF4500'   // White features
      };
      break;
    case 'white':
      colors = {
        background: '#FFFFFF'   // Black features
      };
      break;
    default: // grayscale
      colors = {
        background: '#888888'   // Light gray features
      };
      break;
  }

  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 256 256"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path
        fill={colors.background}
        d="M248,104a31.99228,31.99228,0,0,0-52.9375-24.19043c-16.75439-8.90112-36.76172-14.279-57.666-15.52539l5.19581-31.17578,21.83105,3.3584a24.00409,24.00409,0,1,0,2.43506-15.814l-29.64209-4.56006a7.996,7.996,0,0,0-9.10742,6.5918l-6.91309,41.478c-21.83887.94165-42.813,6.37891-60.2583,15.647a31.99266,31.99266,0,0,0-42.59229,47.74024A59.04669,59.04669,0,0,0,16,144c0,21.93457,12.042,42.35156,33.90723,57.48926C70.875,216.00588,98.60938,224,128,224s57.125-7.99414,78.09277-22.51074C227.958,186.35158,240,165.93459,240,144a59.01726,59.01726,0,0,0-2.3457-16.44922A32.17163,32.17163,0,0,0,248,104ZM72,132a16,16,0,1,1,16,16A16.01833,16.01833,0,0,1,72,132Zm92.69629,51.10938a80.122,80.122,0,0,1-73.39209,0,8,8,0,0,1,7.34033-14.2168,64.09433,64.09433,0,0,0,58.71094,0,8.00008,8.00008,0,0,1,7.34082,14.2168ZM168,148a16,16,0,1,1,16-16A16.01833,16.01833,0,0,1,168,148Z"
      />
    </svg>
  )
}