import React from 'react';
import { BookOpen } from 'lucide-react';

interface Term {
  term: string;
  reading: string;
  desc: string;
}

interface GlossaryProps {
  title?: string;
  subtitle?: string;
  terms?: Term[];
  theme?: string;
}

export function Glossary({
  title = '用語集',
  subtitle = '知っておきたい重要な用語を解説します。',
  terms = [],
  theme = 'default',
}: GlossaryProps) {
  const themeClasses: Record<string, { bg: string; card: string; text: string; sub: string; term: string; reading: string; border: string }> = {
    default: { bg: '', card: 'bg-dark-gray', text: 'text-white', sub: 'text-text-light-gray', term: 'text-crimson-red', reading: 'text-text-light-gray', border: 'border-soft-gray-border/20' },
    warm: { bg: 'bg-orange-50/20', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', term: 'text-orange-700', reading: 'text-orange-400', border: 'border-orange-200' },
    professional: { bg: 'bg-slate-900', card: 'bg-slate-800', text: 'text-white', sub: 'text-slate-300', term: 'text-blue-400', reading: 'text-slate-400', border: 'border-slate-700' },
    ocean: { bg: 'bg-blue-50/20', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', term: 'text-blue-700', reading: 'text-blue-400', border: 'border-blue-200' },
    forest: { bg: 'bg-emerald-50/20', card: 'bg-white', text: 'text-slate-800', sub: 'text-slate-500', term: 'text-emerald-700', reading: 'text-emerald-400', border: 'border-emerald-200' },
  };
  const t = themeClasses[theme] || themeClasses.default;

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

        <div className="space-y-4">
          {terms.map((item, i) => (
            <div
              key={i}
              className={`${t.card} border ${t.border} rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow`}
            >
              <div className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-3 mb-2">
                <h3 className={`text-lg font-bold ${t.term}`}>{item.term}</h3>
                {item.reading && (
                  <span className={`text-xs ${t.reading}`}>（{item.reading}）</span>
                )}
              </div>
              <p className={`text-sm leading-relaxed ${t.sub}`}>{item.desc}</p>
            </div>
          ))}
        </div>

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