helix-engage/src/components/shared/status-badge.tsx

import { BadgeWithDot } from '@/components/base/badges/badges';
import type { AdStatus, CampaignStatus, LeadStatus } from '@/types/entities';

const toTitleCase = (str: string): string =>
    str
        .toLowerCase()
        .replace(/_/g, ' ')
        .replace(/\b\w/g, (c) => c.toUpperCase());

type LeadStatusColor = 'blue' | 'brand' | 'success' | 'warning' | 'purple' | 'error' | 'gray';
type CampaignStatusColor = 'gray' | 'success' | 'warning' | 'blue';

const leadStatusColorMap: Record<LeadStatus, LeadStatusColor> = {
    NEW: 'blue',
    CONTACTED: 'brand',
    QUALIFIED: 'success',
    NURTURING: 'warning',
    APPOINTMENT_SET: 'purple',
    CONVERTED: 'success',
    LOST: 'error',
};

const campaignStatusColorMap: Record<CampaignStatus, CampaignStatusColor> = {
    DRAFT: 'gray',
    ACTIVE: 'success',
    PAUSED: 'warning',
    COMPLETED: 'blue',
};

interface LeadStatusBadgeProps {
    status: LeadStatus;
}

export const LeadStatusBadge = ({ status }: LeadStatusBadgeProps) => {
    const color = leadStatusColorMap[status];
    return (
        <BadgeWithDot size="sm" type="pill-color" color={color}>
            {toTitleCase(status)}
        </BadgeWithDot>
    );
};

interface CampaignStatusBadgeProps {
    status: CampaignStatus;
}

export const CampaignStatusBadge = ({ status }: CampaignStatusBadgeProps) => {
    const color = campaignStatusColorMap[status];
    return (
        <BadgeWithDot size="sm" type="pill-color" color={color}>
            {toTitleCase(status)}
        </BadgeWithDot>
    );
};

type AdStatusColor = 'gray' | 'success' | 'warning' | 'blue';

const adStatusColorMap: Record<AdStatus, AdStatusColor> = {
    DRAFT: 'gray',
    ACTIVE: 'success',
    PAUSED: 'warning',
    ENDED: 'blue',
};

interface AdStatusBadgeProps {
    status: AdStatus;
}

export const AdStatusBadge = ({ status }: AdStatusBadgeProps) => {
    const color = adStatusColorMap[status];
    return (
        <BadgeWithDot size="sm" type="pill-color" color={color}>
            {toTitleCase(status)}
        </BadgeWithDot>
    );
};