import React from 'react';
import { useTheme } from '@/contexts/ThemeContext';

export const ColorIcon = ({ icon: Icon, background }) => {
  const { isDarkMode } = useTheme();

  return (
    <div 
      className={`
        inline-flex items-center justify-center
        w-8 h-8 rounded-lg transition-all duration-300
        ${isDarkMode ? 'bg-opacity-25' : 'bg-opacity-15'}
        hover:${isDarkMode ? 'bg-opacity-35' : 'bg-opacity-25'}
      `}
      style={{ backgroundColor: background }}
    >
      <span 
        className="text-base transition-colors duration-300"
        style={{ color: background }}
      >
        {Icon}
      </span>
    </div>
  );
};

