import React from 'react';
import { Card } from '@/components/ui/Card';
import { Check, X } from 'lucide-react';

interface ComparisonItem {
    label: string;
    value: boolean;
    text?: string;
}

interface AnswerFirstBlockProps {
    whatIsIt: string; // 2 sentences: "Was ist das?"
    whenToUse: string[]; // 3 Bulletpoints: "Wann brauchst du's?"
    comparison: {
        leftTitle: string;
        rightTitle: string;
        items: ComparisonItem[];
    };
    howTo: {
        steps: string[]; // 3 Steps: "So funktioniert's"
    };
    className?: string; // Add className prop
}

export const AnswerFirstBlock: React.FC<AnswerFirstBlockProps> = ({
    whatIsIt,
    whenToUse,
    comparison,
    howTo,
    className,
}) => {
    const leftValueFor = (item: ComparisonItem) => item.text ?? 'No';

    return (
        <section className={`my-8 space-y-8 ${className || ''}`} aria-label="Quick answer">
            <div className="prose max-w-none">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">Quick Summary</h2>
                <p className="text-lg text-gray-700 leading-relaxed font-medium">
                    {whatIsIt}
                </p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <Card className="p-6 bg-blue-50 border-blue-100">
                    <h3 className="font-semibold text-lg text-blue-900 mb-4">When to use this?</h3>
                    <ul className="space-y-3">
                        {whenToUse.map((item, idx) => (
                            <li key={idx} className="flex items-start gap-3 text-blue-800">
                                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />
                                {item}
                            </li>
                        ))}
                    </ul>
                </Card>

                <Card className="p-6 bg-white border-slate-200 shadow-sm flex flex-col">
                    <h3 className="font-semibold text-lg text-slate-900 mb-6 font-sans">Comparison</h3>
                    <div className="space-y-4 flex-1">
                        {comparison.items.map((item, idx) => (
                            <div key={idx} className="flex flex-col gap-2 rounded-xl border border-slate-100 bg-slate-50 p-4">
                                <div className="font-semibold text-sm text-slate-900">
                                    {item.label}
                                </div>
                                <div className="grid grid-cols-2 gap-4 text-sm mt-1">
                                    {/* Left Side (e.g., Static Pages) */}
                                    <div>
                                        <div className="text-xs text-slate-500 mb-1">{comparison.leftTitle}</div>
                                        <div className="text-slate-600 font-medium">{leftValueFor(item)}</div>
                                    </div>
                                    {/* Right Side (e.g., QR Master) */}
                                    <div>
                                        <div className="text-xs text-blue-600 mb-1 font-medium">{comparison.rightTitle}</div>
                                        <div className="flex items-center gap-1.5 font-semibold text-slate-900">
                                            {item.value ? (
                                                <>
                                                    <Check className="w-4 h-4 text-emerald-500" aria-hidden="true" />
                                                    <span>Included</span>
                                                </>
                                            ) : (
                                                <>
                                                    <X className="w-4 h-4 text-red-500" aria-hidden="true" />
                                                    <span className="text-slate-500">Not Included</span>
                                                </>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Card>

                <Card className="p-6 bg-green-50 border-green-100">
                    <h3 className="font-semibold text-lg text-green-900 mb-4">How it works</h3>
                    <ol className="space-y-4">
                        {howTo.steps.map((step, idx) => (
                            <li key={idx} className="flex gap-3 text-green-800">
                                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-green-200 text-green-700 flex items-center justify-center text-sm font-bold">
                                    {idx + 1}
                                </span>
                                <span>{step}</span>
                            </li>
                        ))}
                    </ol>
                </Card>
            </div>
        </section>
    );
};
