import React from 'react';
import { resolveIcon } from '@/lib/puck/iconMap';

interface Trouble {
  question: string;
  category: string;
  icon: string;
}

interface CommonProblemsProps {
  title?: string;
  subtitle?: string;
  troubles?: Trouble[];
  theme?: string;
}

export function CommonProblems({
  title = 'よくある悩み',
  subtitle = 'こんなお悩みはありませんか？',
  troubles = [],
  theme = 'default',
}: CommonProblemsProps) {
  const themeClasses: Record<string, { bg: string; card: string; iconBg: string; iconColor: string; text: string; sub: string; badge: string; border: string }> = {
    default: { bg: '', card: 'bg-dark-gray', iconBg: 'bg-red-50', iconColor: 'text-red-500', text: 'text-white', sub: 'text-text-light-gray', badge: 'bg-crimson-red/10 text-crimson-red', border: 'border-soft-gray-border/20' },
    warm: { bg: 'bg-orange-50/20', card: 'bg-white', iconBg: 'bg-orange-50', iconColor: 'text-orange-500', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-orange-100 text-orange-700', border: 'border-orange-200' },
    professional: { bg: 'bg-slate-900', card: 'bg-slate-800', iconBg: 'bg-slate-700', iconColor: 'text-red-400', text: 'text-white', sub: 'text-slate-300', badge: 'bg-slate-700 text-slate-300', border: 'border-slate-700' },
    ocean: { bg: 'bg-blue-50/20', card: 'bg-white', iconBg: 'bg-blue-50', iconColor: 'text-blue-500', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-blue-100 text-blue-700', border: 'border-blue-200' },
    forest: { bg: 'bg-emerald-50/20', card: 'bg-white', iconBg: 'bg-emerald-50', iconColor: 'text-emerald-500', text: 'text-slate-800', sub: 'text-slate-500', badge: 'bg-emerald-100 text-emerald-700', border: 'border-emerald-200' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  const getIcon = (iconName: string) => {
    const Icon = resolveIcon(iconName);
    return <Icon className={`w-5 h-5 ${t.iconColor}`} />;
  };

  return (
    <section className={`w-full py-12 ${t.bg}`}>
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10">
          <h2 className={`text-2xl sm:text-3xl font-bold mb-3 ${t.text}`}>{title}</h2>
          {subtitle && <p className={`text-sm ${t.sub} max-w-lg mx-auto`}>{subtitle}</p>}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {troubles.map((trouble, i) => (
            <div
              key={i}
              className={`${t.card} border ${t.border} rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow`}
            >
              <div className="flex items-start gap-3">
                <div className={`w-10 h-10 rounded-lg ${t.iconBg} flex items-center justify-center shrink-0`}>
                  {getIcon(trouble.icon)}
                </div>
                <div className="flex-1 min-w-0">
                  <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${t.badge} mb-2 inline-block`}>
                    {trouble.category}
                  </span>
                  <p className={`text-sm font-medium leading-snug ${t.text}`}>{trouble.question}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {troubles.length === 0 && (
          <p className="text-center text-text-light-gray py-8">悩みを追加してください。</p>
        )}
      </div>
    </section>
  );
}
