import React, { useMemo } from 'react';
import { FaChessKnight, FaLink, FaPen } from 'react-icons/fa';
import { IoLanguage } from 'react-icons/io5';
import { MdOutlineCategory } from 'react-icons/md';
import { GiSkills } from 'react-icons/gi';
import { BiBookReader } from 'react-icons/bi';

type CategoryConfig = {
    [key: string]: {
      headerColor: string;
      bodyColor: string;
      textColor: string;
      icon: any;
    }
};  

const categoryConfig : CategoryConfig  = {
    'Strategy': {
        headerColor: 'bg-yellow-400',
        bodyColor: 'bg-yellow-100',
        textColor: 'text-yellow-900',
        icon: FaChessKnight
    },
    'Word Partners': {
        headerColor: 'bg-purple-700',
        bodyColor: 'bg-purple-200',
        textColor: 'text-purple-900',
        icon: MdOutlineCategory
    },
    'Word Link': {
        headerColor: 'bg-green-600',
        bodyColor: 'bg-green-100',
        textColor: 'text-green-900',
        icon: FaLink
    },
    'CT Focus': {
        headerColor: 'bg-purple-700',
        bodyColor: 'bg-purple-200',
        textColor: 'text-purple-900',
        icon: GiSkills
    },
    'Reading Skill': {
        headerColor: 'bg-orange-200',
        bodyColor: 'bg-orange-100',
        textColor: 'text-orange-900',
        icon: BiBookReader
    },
    'Language for Writing': {
        headerColor: 'bg-orange-200',
        bodyColor: 'bg-orange-100',
        textColor: 'text-orange-900',
        icon: IoLanguage
    },
    'Writing Skill': {
        headerColor: 'bg-orange-200',
        bodyColor: 'bg-orange-100',
        textColor: 'text-orange-900',
        icon: FaPen
    }
};

const Tip: React.FC<{ category: string; html: string }> = ({ category, html }) => {

    const { headerColor, bodyColor, textColor, icon: Icon } = useMemo(() =>
        categoryConfig[category] || categoryConfig['Strategy'], [category]
    );

    return (
        <div className="rounded-lg overflow-hidden shadow-md mb-4">
            <div className={`px-4 py-3 ${headerColor}`}>
                <h2 className="font-bold text-white text-xl flex items-center">
                    <Icon className="ml-2 mr-2" size={24} />
                    {category === "CT Focus" ? "Critical Thinking" : category}
                </h2>
            </div>
            <div className={`p-6 ${bodyColor}`}>
                <p className={`text-lg ${textColor}`} dangerouslySetInnerHTML={{ __html: html }} />
            </div>
        </div>
    );
};

export default Tip;