import { Card } from '@/components/ui/Card';

import type { ProvisioningState } from '@/types/provisioning';

type ProvisioningStepCardProps = {
  state: ProvisioningState;
  active: boolean;
};

export function ProvisioningStepCard({
  state,
  active,
}: ProvisioningStepCardProps) {
  return (
    <Card
      className={
        active
          ? 'border border-blue-400/40 bg-blue-500/10'
          : 'border border-white/10'
      }
    >
      <p
        className={`text-sm font-semibold ${
          active
            ? 'text-blue-200'
            : 'text-slate-300'
        }`}
      >
        {state.replace(/_/g, ' ')}
      </p>
    </Card>
  );
}