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

interface ProcessFlowProps {
  heading?: string;
  steps?: Array<{
    number: string;
    title: string;
    description: string;
  }>;
  theme?: string;
}

export function ProcessFlow({
  heading = 'ご利用の流れ',
  steps = [
    { number: '01', title: 'ステップ 1', description: '最初の手順を説明します。' },
    { number: '02', title: 'ステップ 2', description: '次の手順を説明します。' },
    { number: '03', title: 'ステップ 3', description: '最後の手順を説明します。' },
  ],
  theme = 'default',
}: ProcessFlowProps) {
  const themeClasses: Record<string, { bg: string; card: string; number: string; text: string; sub: string; line: string; border: string }> = {
    default: { bg: '', card: 'bg-dark-gray', number: 'bg-crimson-red text-white', text: 'text-white', sub: 'text-text-light-gray', line: 'bg-crimson-red/20', border: 'border-soft-gray-border/20' },
    warm: { bg: 'bg-orange-50/20', card: 'bg-white', number: 'bg-orange-500 text-white', text: 'text-slate-800', sub: 'text-slate-500', line: 'bg-orange-200', border: 'border-orange-200' },
    professional: { bg: 'bg-slate-900', card: 'bg-slate-800', number: 'bg-blue-500 text-white', text: 'text-white', sub: 'text-slate-300', line: 'bg-slate-700', border: 'border-slate-700' },
    ocean: { bg: 'bg-blue-50/20', card: 'bg-white', number: 'bg-blue-500 text-white', text: 'text-slate-800', sub: 'text-slate-500', line: 'bg-blue-200', border: 'border-blue-200' },
    forest: { bg: 'bg-emerald-50/20', card: 'bg-white', number: 'bg-emerald-500 text-white', text: 'text-slate-800', sub: 'text-slate-500', line: 'bg-emerald-200', border: 'border-emerald-200' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  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">
        {heading && (
          <h2 className={`text-2xl sm:text-3xl font-bold text-center mb-10 ${t.text}`}>{heading}</h2>
        )}

        {/* Horizontal Flow */}
        <div className="flex flex-col md:flex-row items-stretch gap-4 relative">
          {steps.map((step, i) => (
            <React.Fragment key={i}>
              <div className={`flex-1 ${t.card} border ${t.border} rounded-2xl p-6 shadow-sm relative`}>
                <div className={`w-10 h-10 rounded-full ${t.number} flex items-center justify-center text-sm font-bold mb-4`}>
                  {step.number || String(i + 1).padStart(2, '0')}
                </div>
                <h3 className={`font-bold text-lg mb-2 ${t.text}`}>{step.title}</h3>
                <p className={`text-sm leading-relaxed ${t.sub}`}>{step.description}</p>
              </div>
              {i < steps.length - 1 && (
                <div className="hidden md:flex items-center justify-center shrink-0">
                  <ArrowRight className={`w-6 h-6 ${t.sub}`} />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
