import { Building2, CheckCircle2, CreditCard, Globe } from 'lucide-react';

const STEPS = [
    { num: 1, label: 'Organisation', icon: Building2 },
    { num: 2, label: 'Subdomain', icon: Globe },
    { num: 3, label: 'Plan', icon: CreditCard },
] as const;

interface Props {
    current: 1 | 2 | 3;
}

export default function SetupStepper({ current }: Props) {
    return (
        <div className="flex items-center justify-between">
            {STEPS.map((step, idx) => {
                const done = step.num < current;
                const active = step.num === current;
                const Icon = step.icon;

                return (
                    <div key={step.num} className="flex flex-1 items-center">
                        <div className="flex flex-col items-center gap-1.5">
                            <div
                                className={`flex h-9 w-9 items-center justify-center rounded-full border-2 transition-all ${
                                    done
                                        ? 'border-primary bg-primary text-white'
                                        : active
                                          ? 'border-primary bg-primary/10 text-primary'
                                          : 'border-border bg-muted/30 text-muted-foreground'
                                }`}
                            >
                                {done ? (
                                    <CheckCircle2 className="h-4 w-4" />
                                ) : (
                                    <Icon className="h-4 w-4" />
                                )}
                            </div>
                            <span
                                className={`text-xs font-medium ${
                                    active
                                        ? 'text-foreground'
                                        : done
                                          ? 'text-primary'
                                          : 'text-muted-foreground'
                                }`}
                            >
                                {step.label}
                            </span>
                        </div>

                        {idx < STEPS.length - 1 && (
                            <div
                                className={`mx-2 mb-5 h-0.5 flex-1 rounded-full transition-all ${
                                    done ? 'bg-primary' : 'bg-border'
                                }`}
                            />
                        )}
                    </div>
                );
            })}
        </div>
    );
}