import { LucideIcon } from 'lucide-react'

interface ProcessStepProps {
  step: string
  icon: LucideIcon
  title: string
  description: string
  isLast?: boolean
}

export function ProcessStep({ step, icon: Icon, title, description, isLast = false }: ProcessStepProps) {
  return (
    <div className="flex gap-6 relative">
      {/* Connector line */}
      {!isLast && (
        <div
          className="absolute left-5 top-12 w-px bottom-0 -mb-6"
          style={{ background: 'var(--dt-border-subtle)' }}
          aria-hidden="true"
        />
      )}

      {/* Step indicator */}
      <div className="flex flex-col items-center shrink-0">
        <div
          className="w-10 h-10 rounded-xl flex items-center justify-center relative z-10"
          style={{
            background: 'var(--dt-bg-elevated)',
            border: '1px solid var(--dt-border-accent)',
            boxShadow: 'var(--dt-shadow-glow)',
          }}
        >
          <Icon className="w-5 h-5" style={{ color: 'var(--dt-accent-primary)' }} />
        </div>
      </div>

      {/* Content */}
      <div className="pb-10">
        <div
          className="text-xs font-semibold tracking-widest uppercase mb-1"
          style={{ color: 'var(--dt-text-muted)' }}
        >
          Step {step}
        </div>
        <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--dt-text-primary)' }}>
          {title}
        </h3>
        <p className="text-sm leading-relaxed" style={{ color: 'var(--dt-text-secondary)' }}>
          {description}
        </p>
      </div>
    </div>
  )
}