/**
 * Agent Card Component
 * @description Displays agent information with tags and description
 */

/**
 * AgentCard component props
 */
interface AgentCardProps {
    title: string;
    tags: string[];
    description: string;
}

/**
 * AgentCard component
 * @description Card showing agent details with tags
 * @param props - Component props
 * @returns AgentCard element
 */
export function AgentCard({ title, tags, description }: AgentCardProps) {
    // Define your colors in order
    const tagColors = [
        "bg-[#E5E8F4]", // 1st tag (index 0)
        "bg-[#E9D7FF]", // 2nd tag (index 1)
        "bg-[#E2F6B2]", // 3rd tag (index 2)
    ];

    return (
        <div className="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100 card-hover">
            <h3 className="text-[1.25rem] md:text-[1.375rem] lg:text-[1.5rem] font-semibold text-gray-900 mb-2 md:mb-3 leading-tight">
                {title}
            </h3>

            <div className="flex flex-wrap gap-2 mb-3 md:mb-4">
                {tags.map((tag, index) => (
                    <span
                        key={index}
                        /* Use the index to pick the color; fall back to the first color if index > 2 */
                        className={`${tagColors[index] || tagColors[0]} px-2.5 py-1 md:px-3 text-[0.75rem] md:text-[0.8125rem] lg:text-[0.875rem] font-medium text-gray-700 border border-gray-200 rounded`}
                    >
                        {tag}
                    </span>
                ))}
            </div>

            <p className="text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-gray-600 leading-relaxed">
                {description}
            </p>
        </div>
    );
}
