import { Lightbulb } from 'lucide-react'
import type { GuideSection as GuideSectionType } from '@/data/guides'

interface GuideSectionProps {
  section: GuideSectionType
  index: number
}

export function GuideSection({ section, index }: GuideSectionProps) {
  return (
    <div className="mb-8">
      <h3 className="text-base font-heading font-semibold text-foreground mb-4 flex items-center gap-2">
        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-xs font-bold text-primary">
          {index + 1}
        </span>
        {section.title}
      </h3>
      <ol className="space-y-3 pl-8">
        {section.steps.map((step, i) => (
          <li key={i} className="relative">
            <span className="absolute -left-6 top-0.5 font-label text-[0.625rem] text-muted-foreground">
              {i + 1}.
            </span>
            <p
              className="text-sm text-foreground leading-relaxed"
              dangerouslySetInnerHTML={{
                __html: step.instruction
                  .replace(/\*\*(.*?)\*\*/g, '<strong class="text-foreground font-semibold">$1</strong>')
              }}
            />
            {step.detail && (
              <p className="mt-1 text-xs text-muted-foreground leading-relaxed">
                {step.detail}
              </p>
            )}
            {step.tip && (
              <div className="mt-2 flex items-start gap-2 rounded-lg bg-primary/5 border-l-2 border-primary px-3 py-2">
                <Lightbulb size={14} className="text-primary shrink-0 mt-0.5" />
                <p className="text-xs text-muted-foreground leading-relaxed">
                  <span className="font-semibold text-foreground">Tip:</span> {step.tip}
                </p>
              </div>
            )}
          </li>
        ))}
      </ol>
    </div>
  )
}