import React from 'react';

type Props = { steps: string[]; title?: string };

export function StepList({ steps, title = "How to do it" }: Props) {
    if (!steps?.length) return null;

    return (
        <section className="rounded-xl border border-gray-200 bg-white p-6 my-8 shadow-sm">
            <h2 className="text-xl font-bold text-gray-900 mb-4">{title}</h2>
            <ol className="list-decimal pl-6 space-y-3">
                {steps.map((s, i) => (
                    <li key={`step-${i}`} className="text-gray-700 font-medium pl-2">{s}</li>
                ))}
            </ol>
        </section>
    );
}
