helix-engage/src/components/campaigns/campaign-hero.tsx

import type { FC } from 'react';
import { useNavigate } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowUpRightFromSquare } from '@fortawesome/pro-duotone-svg-icons';

const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
const LinkExternal01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={className} />;

import { Button } from '@/components/base/buttons/button';
import { CampaignStatusBadge } from '@/components/shared/status-badge';
import { formatDateOnly } from '@/lib/format';
import type { Campaign } from '@/types/entities';

interface CampaignHeroProps {
    campaign: Campaign;
}

const formatDateRange = (startDate: string | null, endDate: string | null): string => {
    if (!startDate) return '--';
    if (!endDate) return `${formatDateOnly(startDate)} \u2014 Ongoing`;
    return `${formatDateOnly(startDate)} \u2014 ${formatDateOnly(endDate)}`;
};

const formatDuration = (startDate: string | null, endDate: string | null): string => {
    if (!startDate) return '--';

    const start = new Date(startDate);
    const end = endDate ? new Date(endDate) : new Date();
    const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));

    return `${diffDays} days`;
};

export const CampaignHero = ({ campaign }: CampaignHeroProps) => {
    const navigate = useNavigate();

    return (
        <div className="border-b border-secondary bg-primary px-7 py-6">
            {/* Back button */}
            <button
                onClick={() => navigate('/campaigns')}
                className="mb-4 flex items-center gap-1.5 text-sm text-tertiary transition hover:text-secondary cursor-pointer"
            >
                <ArrowLeft className="size-4" />
                <span>Back to Campaigns</span>
            </button>

            {/* Title row */}
            <div className="flex flex-wrap items-start justify-between gap-4">
                <div className="min-w-0 flex-1">
                    <h1 className="text-display-xs font-bold text-primary">
                        {campaign.campaignName ?? 'Untitled Campaign'}
                    </h1>

                    <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-tertiary">
                        <span>{campaign.externalCampaignId ?? campaign.id.slice(0, 12)}</span>
                        <span className="text-quaternary">&middot;</span>
                        <span>{formatDateRange(campaign.startDate, campaign.endDate)}</span>
                    </div>

                    {/* Badges */}
                    <div className="mt-3 flex flex-wrap items-center gap-2">
                        {campaign.platform && (
                            <span className="rounded-lg bg-secondary px-2 py-0.5 text-xs font-medium text-secondary">
                                {campaign.platform}
                            </span>
                        )}
                        {campaign.campaignType && (
                            <span className="rounded-lg bg-secondary px-2 py-0.5 text-xs font-medium text-secondary">
                                {campaign.campaignType.replace(/_/g, ' ')}
                            </span>
                        )}
                        {campaign.campaignStatus && <CampaignStatusBadge status={campaign.campaignStatus} />}
                        <span className="rounded-lg bg-brand-primary_alt px-2 py-0.5 text-xs font-medium text-brand-secondary">
                            {formatDuration(campaign.startDate, campaign.endDate)}
                        </span>
                    </div>
                </div>

                {/* Actions */}
                <div className="flex shrink-0 items-center gap-2">
                    {campaign.platformUrl && (
                        <Button
                            color="secondary"
                            size="sm"
                            iconTrailing={LinkExternal01}
                            href={campaign.platformUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            View on Platform
                        </Button>
                    )}
                    <Button
                        color="primary"
                        size="sm"
                        href={`/leads`}
                    >
                        View Leads
                    </Button>
                </div>
            </div>
        </div>
    );
};