import { CalendarDaysIcon, FlagIcon } from "@heroicons/react/24/outline";
import { SectionHeader } from "@/components/ui/PageHeader";
import { StatusBadge } from "@/components/ui/StatusBadge";
import { formatCampaignScheduleDate } from "@/lib/campaign-detail-ui";
import { campaignStatusBadgeVariant, campaignStatusLabel } from "@/lib/campaigns";
import type { Campaign } from "@/types/campaign";

export function CampaignStatusCard({ campaign }: { campaign: Campaign }) {
  return (
    <section className="space-y-3" aria-labelledby="campaign-status-heading">
      <SectionHeader
        id="campaign-status-heading"
        title="Status"
        icon={<FlagIcon className="size-4" />}
      />
      <div className="rounded-pv border border-line bg-surface px-3 py-3">
        <StatusBadge variant={campaignStatusBadgeVariant(campaign.status)}>
          {campaignStatusLabel(campaign.status)}
        </StatusBadge>
        <p className="mt-2 text-[0.75rem] text-ink-40">
          Updated {formatCampaignScheduleDate(campaign.updated_at.slice(0, 10))}
        </p>
      </div>
    </section>
  );
}

export function CampaignScheduleCard({ campaign }: { campaign: Campaign }) {
  const rows = [
    { label: "Campaign starts", value: formatCampaignScheduleDate(campaign.start_date) },
    { label: "Campaign ends", value: formatCampaignScheduleDate(campaign.end_date) },
  ];

  return (
    <section className="space-y-3" aria-labelledby="campaign-schedule-heading">
      <SectionHeader
        id="campaign-schedule-heading"
        title="Schedule"
        icon={<CalendarDaysIcon className="size-4" />}
      />
      <ol className="space-y-0 rounded-pv border border-line bg-surface">
        {rows.map((row, index) => (
          <li
            key={row.label}
            className={`flex items-baseline justify-between gap-3 px-3 py-2.5 ${
              index > 0 ? "border-t border-line" : ""
            }`}
          >
            <span className="text-[0.8125rem] text-ink-60">{row.label}</span>
            <span className="shrink-0 text-[0.8125rem] font-medium tabular-nums text-primary">
              {row.value}
            </span>
          </li>
        ))}
      </ol>
    </section>
  );
}