pxengine 0.1.0

package/src/lib/countries.ts

@@ -0,0 +1,203 @@
+export const countries = [
+  { code: "AF", name: "Afghanistan", flag: "🇦🇫" },
+  { code: "AL", name: "Albania", flag: "🇦🇱" },
+  { code: "DZ", name: "Algeria", flag: "🇩🇿" },
+  { code: "AD", name: "Andorra", flag: "🇦🇩" },
+  { code: "AO", name: "Angola", flag: "🇦🇴" },
+  { code: "AG", name: "Antigua and Barbuda", flag: "🇦🇬" },
+  { code: "AR", name: "Argentina", flag: "🇦🇷" },
+  { code: "AM", name: "Armenia", flag: "🇦🇲" },
+  { code: "AU", name: "Australia", flag: "🇦🇺" },
+  { code: "AT", name: "Austria", flag: "🇦🇹" },
+  { code: "AZ", name: "Azerbaijan", flag: "🇦🇿" },
+  { code: "BS", name: "Bahamas", flag: "🇧🇸" },
+  { code: "BH", name: "Bahrain", flag: "🇧🇭" },
+  { code: "BD", name: "Bangladesh", flag: "🇧🇩" },
+  { code: "BB", name: "Barbados", flag: "🇧🇧" },
+  { code: "BY", name: "Belarus", flag: "🇧🇾" },
+  { code: "BE", name: "Belgium", flag: "🇧🇪" },
+  { code: "BZ", name: "Belize", flag: "🇧🇿" },
+  { code: "BJ", name: "Benin", flag: "🇧🇯" },
+  { code: "BT", name: "Bhutan", flag: "🇧🇹" },
+  { code: "BO", name: "Bolivia", flag: "🇧🇴" },
+  { code: "BA", name: "Bosnia and Herzegovina", flag: "🇧🇦" },
+  { code: "BW", name: "Botswana", flag: "🇧🇼" },
+  { code: "BR", name: "Brazil", flag: "🇧🇷" },
+  { code: "BN", name: "Brunei", flag: "🇧🇳" },
+  { code: "BG", name: "Bulgaria", flag: "🇧🇬" },
+  { code: "BF", name: "Burkina Faso", flag: "🇧🇫" },
+  { code: "BI", name: "Burundi", flag: "🇧🇮" },
+  { code: "CV", name: "Cabo Verde", flag: "🇨🇻" },
+  { code: "KH", name: "Cambodia", flag: "🇰🇭" },
+  { code: "CM", name: "Cameroon", flag: "🇨🇲" },
+  { code: "CA", name: "Canada", flag: "🇨🇦" },
+  { code: "CF", name: "Central African Republic", flag: "🇨🇫" },
+  { code: "TD", name: "Chad", flag: "🇹🇩" },
+  { code: "CL", name: "Chile", flag: "🇨🇱" },
+  { code: "CN", name: "China", flag: "🇨🇳" },
+  { code: "CO", name: "Colombia", flag: "🇨🇴" },
+  { code: "KM", name: "Comoros", flag: "🇰🇲" },
+  { code: "CG", name: "Congo", flag: "🇨🇬" },
+  { code: "CD", name: "Democratic Republic of the Congo", flag: "🇨🇩" },
+  { code: "CR", name: "Costa Rica", flag: "🇨🇷" },
+  { code: "HR", name: "Croatia", flag: "🇭🇷" },
+  { code: "CU", name: "Cuba", flag: "🇨🇺" },
+  { code: "CY", name: "Cyprus", flag: "🇨🇾" },
+  { code: "CZ", name: "Czech Republic", flag: "🇨🇿" },
+  { code: "CI", name: "Ivory Coast", flag: "🇨🇮" },
+  { code: "DK", name: "Denmark", flag: "🇩🇰" },
+  { code: "DJ", name: "Djibouti", flag: "🇩🇯" },
+  { code: "DM", name: "Dominica", flag: "🇩🇲" },
+  { code: "DO", name: "Dominican Republic", flag: "🇩🇴" },
+  { code: "EC", name: "Ecuador", flag: "🇪🇨" },
+  { code: "EG", name: "Egypt", flag: "🇪🇬" },
+  { code: "SV", name: "El Salvador", flag: "🇸🇻" },
+  { code: "GQ", name: "Equatorial Guinea", flag: "🇬🇶" },
+  { code: "ER", name: "Eritrea", flag: "🇪🇷" },
+  { code: "EE", name: "Estonia", flag: "🇪🇪" },
+  { code: "SZ", name: "Eswatini", flag: "🇸🇿" },
+  { code: "ET", name: "Ethiopia", flag: "🇪🇹" },
+  { code: "FJ", name: "Fiji", flag: "🇫🇯" },
+  { code: "FI", name: "Finland", flag: "🇫🇮" },
+  { code: "FR", name: "France", flag: "🇫🇷" },
+  { code: "GA", name: "Gabon", flag: "🇬🇦" },
+  { code: "GM", name: "Gambia", flag: "🇬🇲" },
+  { code: "GE", name: "Georgia", flag: "🇬🇪" },
+  { code: "DE", name: "Germany", flag: "🇩🇪" },
+  { code: "GH", name: "Ghana", flag: "🇬🇭" },
+  { code: "GR", name: "Greece", flag: "🇬🇷" },
+  { code: "GD", name: "Grenada", flag: "🇬🇩" },
+  { code: "GT", name: "Guatemala", flag: "🇬🇹" },
+  { code: "GN", name: "Guinea", flag: "🇬🇳" },
+  { code: "GW", name: "Guinea-Bissau", flag: "🇬🇼" },
+  { code: "GY", name: "Guyana", flag: "🇬🇾" },
+  { code: "HT", name: "Haiti", flag: "🇭🇹" },
+  { code: "HN", name: "Honduras", flag: "🇭🇳" },
+  { code: "HU", name: "Hungary", flag: "🇭🇺" },
+  { code: "HK", name: "Hong Kong", flag: "🇭🇰" },
+  { code: "IS", name: "Iceland", flag: "🇮🇸" },
+  { code: "IN", name: "India", flag: "🇮🇳" },
+  { code: "ID", name: "Indonesia", flag: "🇮🇩" },
+  { code: "IR", name: "Iran", flag: "🇮🇷" },
+  { code: "IQ", name: "Iraq", flag: "🇮🇶" },
+  { code: "IE", name: "Ireland", flag: "🇮🇪" },
+  { code: "IL", name: "Israel", flag: "🇮🇱" },
+  { code: "IT", name: "Italy", flag: "🇮🇹" },
+  { code: "JM", name: "Jamaica", flag: "🇯🇲" },
+  { code: "JP", name: "Japan", flag: "🇯🇵" },
+  { code: "JO", name: "Jordan", flag: "🇯🇴" },
+  { code: "KZ", name: "Kazakhstan", flag: "🇰🇿" },
+  { code: "KE", name: "Kenya", flag: "🇰🇪" },
+  { code: "KI", name: "Kiribati", flag: "🇰🇮" },
+  { code: "KP", name: "North Korea", flag: "🇰🇵" },
+  { code: "KR", name: "South Korea", flag: "🇰🇷" },
+  { code: "KW", name: "Kuwait", flag: "🇰🇼" },
+  { code: "KG", name: "Kyrgyzstan", flag: "🇰🇬" },
+  { code: "LA", name: "Laos", flag: "🇱🇦" },
+  { code: "LV", name: "Latvia", flag: "🇱🇻" },
+  { code: "LB", name: "Lebanon", flag: "🇱🇧" },
+  { code: "LS", name: "Lesotho", flag: "🇱🇸" },
+  { code: "LR", name: "Liberia", flag: "🇱🇷" },
+  { code: "LY", name: "Libya", flag: "🇱🇾" },
+  { code: "LI", name: "Liechtenstein", flag: "🇱🇮" },
+  { code: "LT", name: "Lithuania", flag: "🇱🇹" },
+  { code: "LU", name: "Luxembourg", flag: "🇱🇺" },
+  { code: "MG", name: "Madagascar", flag: "🇲🇬" },
+  { code: "MW", name: "Malawi", flag: "🇲🇼" },
+  { code: "MY", name: "Malaysia", flag: "🇲🇾" },
+  { code: "MV", name: "Maldives", flag: "🇲🇻" },
+  { code: "ML", name: "Mali", flag: "🇲🇱" },
+  { code: "MT", name: "Malta", flag: "🇲🇹" },
+  { code: "MH", name: "Marshall Islands", flag: "🇲🇭" },
+  { code: "MR", name: "Mauritania", flag: "🇲🇷" },
+  { code: "MU", name: "Mauritius", flag: "🇲🇺" },
+  { code: "MX", name: "Mexico", flag: "🇲🇽" },
+  { code: "FM", name: "Micronesia", flag: "🇫🇲" },
+  { code: "MD", name: "Moldova", flag: "🇲🇩" },
+  { code: "MC", name: "Monaco", flag: "🇲🇨" },
+  { code: "MN", name: "Mongolia", flag: "🇲🇳" },
+  { code: "ME", name: "Montenegro", flag: "🇲🇪" },
+  { code: "MA", name: "Morocco", flag: "🇲🇦" },
+  { code: "MZ", name: "Mozambique", flag: "🇲🇿" },
+  { code: "MM", name: "Myanmar", flag: "🇲🇲" },
+  { code: "NA", name: "Namibia", flag: "🇳🇦" },
+  { code: "NR", name: "Nauru", flag: "🇳🇷" },
+  { code: "NP", name: "Nepal", flag: "🇳🇵" },
+  { code: "NL", name: "Netherlands", flag: "🇳🇱" },
+  { code: "NZ", name: "New Zealand", flag: "🇳🇿" },
+  { code: "NI", name: "Nicaragua", flag: "🇳🇮" },
+  { code: "NE", name: "Niger", flag: "🇳🇪" },
+  { code: "NG", name: "Nigeria", flag: "🇳🇬" },
+  { code: "MK", name: "North Macedonia", flag: "🇲🇰" },
+  { code: "NO", name: "Norway", flag: "🇳🇴" },
+  { code: "OM", name: "Oman", flag: "🇴🇲" },
+  { code: "PK", name: "Pakistan", flag: "🇵🇰" },
+  { code: "PW", name: "Palau", flag: "🇵🇼" },
+  { code: "PS", name: "Palestine", flag: "🇵🇸" },
+  { code: "PA", name: "Panama", flag: "🇵🇦" },
+  { code: "PG", name: "Papua New Guinea", flag: "🇵🇬" },
+  { code: "PY", name: "Paraguay", flag: "🇵🇾" },
+  { code: "PE", name: "Peru", flag: "🇵🇪" },
+  { code: "PH", name: "Philippines", flag: "🇵🇭" },
+  { code: "PL", name: "Poland", flag: "🇵🇱" },
+  { code: "PT", name: "Portugal", flag: "🇵🇹" },
+  { code: "QA", name: "Qatar", flag: "🇶🇦" },
+  { code: "RO", name: "Romania", flag: "🇷🇴" },
+  { code: "RU", name: "Russia", flag: "🇷🇺" },
+  { code: "RW", name: "Rwanda", flag: "🇷🇼" },
+  { code: "KN", name: "Saint Kitts and Nevis", flag: "🇰🇳" },
+  { code: "LC", name: "Saint Lucia", flag: "🇱🇨" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", flag: "🇻🇨" },
+  { code: "WS", name: "Samoa", flag: "🇼🇸" },
+  { code: "SM", name: "San Marino", flag: "🇸🇲" },
+  { code: "ST", name: "Sao Tome and Principe", flag: "🇸🇹" },
+  { code: "SA", name: "Saudi Arabia", flag: "🇸🇦" },
+  { code: "SN", name: "Senegal", flag: "🇸🇳" },
+  { code: "RS", name: "Serbia", flag: "🇷🇸" },
+  { code: "SC", name: "Seychelles", flag: "🇸🇨" },
+  { code: "SL", name: "Sierra Leone", flag: "🇸🇱" },
+  { code: "SG", name: "Singapore", flag: "🇸🇬" },
+  { code: "SK", name: "Slovakia", flag: "🇸🇰" },
+  { code: "SI", name: "Slovenia", flag: "🇸🇮" },
+  { code: "SB", name: "Solomon Islands", flag: "🇸🇧" },
+  { code: "SO", name: "Somalia", flag: "🇸🇴" },
+  { code: "ZA", name: "South Africa", flag: "🇿🇦" },
+  { code: "SS", name: "South Sudan", flag: "🇸🇸" },
+  { code: "ES", name: "Spain", flag: "🇪🇸" },
+  { code: "LK", name: "Sri Lanka", flag: "🇱🇰" },
+  { code: "SD", name: "Sudan", flag: "🇸🇩" },
+  { code: "SR", name: "Suriname", flag: "🇸🇷" },
+  { code: "SE", name: "Sweden", flag: "🇸🇪" },
+  { code: "CH", name: "Switzerland", flag: "🇨🇭" },
+  { code: "SY", name: "Syria", flag: "🇸🇾" },
+  { code: "TW", name: "Taiwan", flag: "🇹🇼" },
+  { code: "TJ", name: "Tajikistan", flag: "🇹🇯" },
+  { code: "TZ", name: "Tanzania", flag: "🇹🇿" },
+  { code: "TH", name: "Thailand", flag: "🇹🇭" },
+  { code: "TL", name: "Timor-Leste", flag: "🇹🇱" },
+  { code: "TG", name: "Togo", flag: "🇹🇬" },
+  { code: "TO", name: "Tonga", flag: "🇹🇴" },
+  { code: "TT", name: "Trinidad and Tobago", flag: "🇹🇹" },
+  { code: "TN", name: "Tunisia", flag: "🇹🇳" },
+  { code: "TR", name: "Turkey", flag: "🇹🇷" },
+  { code: "TM", name: "Turkmenistan", flag: "🇹🇲" },
+  { code: "TV", name: "Tuvalu", flag: "🇹🇻" },
+  { code: "UG", name: "Uganda", flag: "🇺🇬" },
+  { code: "UA", name: "Ukraine", flag: "🇺🇦" },
+  { code: "AE", name: "United Arab Emirates", flag: "🇦🇪" },
+  { code: "GB", name: "United Kingdom", flag: "🇬🇧" },
+  { code: "US", name: "United States", flag: "🇺🇸" },
+  { code: "UY", name: "Uruguay", flag: "🇺🇾" },
+  { code: "UZ", name: "Uzbekistan", flag: "🇺🇿" },
+  { code: "VU", name: "Vanuatu", flag: "🇻🇺" },
+  { code: "VA", name: "Vatican City", flag: "🇻🇦" },
+  { code: "VE", name: "Venezuela", flag: "🇻🇪" },
+  { code: "VN", name: "Vietnam", flag: "🇻🇳" },
+  { code: "YE", name: "Yemen", flag: "🇾🇪" },
+  { code: "ZM", name: "Zambia", flag: "🇿🇲" },
+  { code: "ZW", name: "Zimbabwe", flag: "🇿🇼" }
+];
+
+export const countriesWithFlags = Object.fromEntries(
+  countries.map((c) => [c.code, { name: c.name, flag: c.flag }])
+);

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export { cn } from "./utils";
+export * from "./validators";

package/src/lib/utils.ts

@@ -0,0 +1,15 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes and tailwind-merge for deduplication
+ * 
+ * @example
+ * ```tsx
+ * cn("px-4 py-2", isActive && "bg-purple500", className)
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/validators/index.ts

@@ -0,0 +1 @@
+export * from "./theme";

package/src/lib/validators/theme.ts

@@ -0,0 +1,148 @@
+/**
+ * Theme Validator
+ * Validates that required CSS variables are defined in the theme
+ */
+
+const requiredCSSVariables = [
+  // Shadcn default variables
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--secondary",
+  "--secondary-foreground",
+  "--muted",
+  "--muted-foreground",
+  "--accent",
+  "--accent-foreground",
+  "--destructive",
+  "--destructive-foreground",
+  "--border",
+  "--input",
+  "--ring",
+  "--radius",
+  
+  // Custom theme variables (from client)
+  "--gray25",
+  "--gray50",
+  "--gray100",
+  "--gray200",
+  "--gray300",
+  "--gray400",
+  "--gray500",
+  "--gray600",
+  "--gray700",
+  "--gray800",
+  "--gray900",
+  "--purple100",
+  "--purple200",
+  "--purple500",
+  "--purple-text",
+  "--purple50",
+  "--purple20",
+  "--purple-border",
+  "--purpleLight",
+  "--purple-text-1",
+  "--purple-text-2",
+] as const;
+
+/**
+ * Get computed CSS variable value
+ */
+export function getCSSVariable(variable: string, element: HTMLElement = document.documentElement): string {
+  return getComputedStyle(element).getPropertyValue(variable).trim();
+}
+
+/**
+ * Check if a CSS variable is defined
+ */
+export function isCSSVariableDefined(variable: string, element: HTMLElement = document.documentElement): boolean {
+  const value = getCSSVariable(variable, element);
+  return value !== "";
+}
+
+/**
+ * Validate that all required CSS variables are defined
+ * @returns Object with validation result and missing variables
+ */
+export function validateTheme(element: HTMLElement = document.documentElement): {
+  isValid: boolean;
+  missingVariables: string[];
+  warnings: string[];
+} {
+  const missingVariables: string[] = [];
+  const warnings: string[] = [];
+
+  for (const variable of requiredCSSVariables) {
+    if (!isCSSVariableDefined(variable, element)) {
+      missingVariables.push(variable);
+    }
+  }
+
+  // Check for dark mode variables
+  const darkElement = document.querySelector(".dark");
+  if (!darkElement) {
+    warnings.push("Dark mode class '.dark' not found. Dark mode may not work correctly.");
+  }
+
+  return {
+    isValid: missingVariables.length === 0,
+    missingVariables,
+    warnings,
+  };
+}
+
+/**
+ * Log theme validation results to console
+ */
+export function logThemeValidation(): void {
+  const result = validateTheme();
+
+  if (result.isValid) {
+    console.log("✅ Theme validation passed! All required CSS variables are defined.");
+  } else {
+    console.error("❌ Theme validation failed! Missing CSS variables:");
+    result.missingVariables.forEach((variable) => {
+      console.error(`  - ${variable}`);
+    });
+  }
+
+  if (result.warnings.length > 0) {
+    console.warn("⚠️ Theme warnings:");
+    result.warnings.forEach((warning) => {
+      console.warn(`  - ${warning}`);
+    });
+  }
+}
+
+/**
+ * Assert that theme is valid (throws error if not)
+ * Use this in development to catch theme issues early
+ */
+export function assertThemeValid(): void {
+  const result = validateTheme();
+
+  if (!result.isValid) {
+    throw new Error(
+      `Theme validation failed! Missing CSS variables: ${result.missingVariables.join(", ")}`
+    );
+  }
+}
+
+/**
+ * Get all CSS variables as an object
+ * Useful for debugging
+ */
+export function getAllCSSVariables(element: HTMLElement = document.documentElement): Record<string, string> {
+  const variables: Record<string, string> = {};
+
+  for (const variable of requiredCSSVariables) {
+    variables[variable] = getCSSVariable(variable, element);
+  }
+
+  return variables;
+}

package/src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { CampaignSeedCardProps } from "./CampaignSeedCard.types";
+import { FormCard } from "../../generic/FormCard";
+import { FieldConfig } from "@/types/common";
+import { CheckCircle2 } from "lucide-react";
+
+/**
+ * Default field configuration for Campaign Seed
+ */
+export const CAMPAIGN_SEED_FIELDS: FieldConfig[] = [
+  {
+    key: "brand",
+    label: "Brand / Campaign",
+    type: "text",
+    placeholder: "Not specified",
+  },
+  {
+    key: "objective",
+    label: "Objective",
+    type: "text",
+    placeholder: "Not specified",
+  },
+  {
+    key: "budget_hint",
+    label: "Budget Hint",
+    type: "slider",
+    placeholder: "Not specified",
+    sliderConfig: {
+      min: 0,
+      max: 1000000,
+      step: 1000,
+      formatValue: (value: any) => {
+        if (!value) return "$0 - $100K";
+
+        const formatCurrency = (amount: number) => {
+          if (amount >= 1000000) return `$${(amount / 1000000).toFixed(1)}M`;
+          if (amount >= 1000) return `$${(amount / 1000).toFixed(0)}K`;
+          return `$${amount.toLocaleString()}`;
+        };
+
+        let normalized;
+        if (typeof value === "object" && value?.min !== undefined) {
+          normalized = value;
+        } else if (typeof value === "string" && value.includes("-")) {
+          const [minStr, maxStr] = value.split("-");
+          normalized = {
+            min: Number(minStr) || 0,
+            max: Number(maxStr) || 100000,
+          };
+        } else {
+          const val = Number(String(value).replace(/[^0-9.]/g, "")) || 0;
+          normalized =
+            val > 0 ? { min: val, max: val } : { min: 0, max: 100000 };
+        }
+
+        if (normalized.min === normalized.max)
+          return formatCurrency(normalized.min);
+        return `${formatCurrency(normalized.min)} - ${formatCurrency(normalized.max)}`;
+      },
+    },
+  },
+  {
+    key: "geo_or_audience",
+    label: "Geography or Audience",
+    type: "text",
+    placeholder: "Not specified",
+  },
+  {
+    key: "timeline_opt",
+    label: "Timeline Option",
+    type: "text",
+    placeholder: "Not specified",
+  },
+  {
+    key: "notes",
+    label: "Notes",
+    type: "textarea",
+    placeholder: "No notes",
+    rows: 4,
+  },
+];
+
+/**
+ * CampaignSeedCard
+ *
+ * A domain-specific molecule for the Creator Discovery workflow.
+ * Encapsulates the specific brand info fields and selection status.
+ */
+export const CampaignSeedCard = React.memo<CampaignSeedCardProps>(
+  ({
+    selectionStatus,
+    isLatestMessage = true,
+    className,
+    ...formCardProps
+  }) => {
+    return (
+      <div className="flex flex-col gap-2">
+        <FormCard
+          {...formCardProps}
+          title={formCardProps.title || "Brand Information"}
+          fields={CAMPAIGN_SEED_FIELDS}
+          className={className}
+          footer={
+            !isLatestMessage && selectionStatus ? (
+              <div className="flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1">
+                <CheckCircle2 className="h-4 w-4" />
+                <span>
+                  {selectionStatus === "agent"
+                    ? "Selected by Agent"
+                    : "Selected by User"}
+                </span>
+              </div>
+            ) : (
+              formCardProps.footer
+            )
+          }
+        />
+      </div>
+    );
+  },
+);
+
+CampaignSeedCard.displayName = "CampaignSeedCard";

package/src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.types.ts

@@ -0,0 +1,13 @@
+import { FormCardProps } from "../../generic/FormCard";
+
+export interface CampaignSeedCardProps extends Omit<FormCardProps, "fields"> {
+  /**
+   * Status of the selection (done by user or agent)
+   */
+  selectionStatus?: "user" | "agent";
+  
+  /**
+   * Whether the message is the latest (to show countdown/actions)
+   */
+  isLatestMessage?: boolean;
+}

package/src/molecules/creator-discovery/CampaignSeedCard/index.ts

@@ -0,0 +1,2 @@
+export * from "./CampaignSeedCard";
+export * from "./CampaignSeedCard.types";

package/src/molecules/creator-discovery/MCQCard/MCQCard.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { MCQCardProps } from "./MCQCard.types";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+  Badge,
+} from "@/components";
+import { ActionButton } from "../../generic/ActionButton";
+import { cn } from "@/lib/utils";
+import { CheckCircle2, Sparkles } from "lucide-react";
+
+/**
+ * MCQCard
+ *
+ * A molecule for Multiple Choice Questions.
+ * Supports:
+ * - Recommended options with styling
+ * - Radio-style selection
+ * - Integrated ActionButton with countdown
+ * - Peer/Agent approval labels
+ * - Premium aesthetics
+ */
+export const MCQCard = React.memo<MCQCardProps>(
+  ({
+    question,
+    options,
+    recommended,
+    selectedOption,
+    onSelect,
+    onProceed,
+    isLatestMessage = true,
+    countdown,
+    isPaused = false,
+    onPause,
+    isLoading = false,
+    className,
+    selectionStatus,
+  }) => {
+    const handleOptionClick = (key: string) => {
+      if (isLatestMessage && !isLoading) {
+        onSelect?.(key);
+      }
+    };
+
+    const handleProceed = () => {
+      if (selectedOption || recommended) {
+        onProceed?.(selectedOption || recommended || "");
+      }
+    };
+
+    return (
+      <Card
+        className={cn(
+          "w-full rounded-[24px] border border-gray200 bg-white shadow-sm overflow-hidden",
+          className,
+        )}
+      >
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg font-bold text-gray-900 tracking-tight leading-snug">
+            {question}
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent className="space-y-3 pb-6">
+          {Object.entries(options).map(([key, label]) => {
+            const isSelected = selectedOption === key;
+            const isRecommended = key === recommended;
+
+            return (
+              <div
+                key={key}
+                onClick={() => handleOptionClick(key)}
+                className={cn(
+                  "group relative flex items-start gap-4 p-4 rounded-2xl border transition-all duration-200 cursor-pointer",
+                  isSelected
+                    ? "border-purple500 bg-purple50/30"
+                    : "border-gray-100 bg-gray-50/30 hover:border-gray-300 hover:bg-gray-50",
+                  isLoading && "opacity-50 cursor-not-allowed",
+                )}
+              >
+                {/* Radio Circle */}
+                <div
+                  className={cn(
+                    "mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
+                    isSelected
+                      ? "border-purple500 bg-purple500"
+                      : "border-gray-300 bg-white group-hover:border-gray-400",
+                  )}
+                >
+                  {isSelected && (
+                    <div className="w-1.5 h-1.5 rounded-full bg-white" />
+                  )}
+                </div>
+
+                <div className="flex-1 space-y-1.5">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span
+                      className={cn(
+                        "text-sm font-semibold transition-colors",
+                        isSelected ? "text-purple900" : "text-gray700",
+                      )}
+                    >
+                      {label}
+                    </span>
+
+                    {isRecommended && (
+                      <Badge
+                        variant="outline"
+                        className="bg-green-50 text-green-700 border-green-100 flex items-center gap-1 text-[10px] py-0 h-5"
+                      >
+                        <Sparkles className="h-3 w-3" />
+                        Recommended
+                      </Badge>
+                    )}
+
+                    {isSelected && !isLatestMessage && (
+                      <Badge
+                        variant="outline"
+                        className="bg-purple-50 text-purple-700 border-purple-100 text-[10px] py-0 h-5"
+                      >
+                        Selected
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6">
+          {isLatestMessage ? (
+            <div className="w-full flex justify-center">
+              <ActionButton
+                label={
+                  selectedOption ? "Continue" : "Proceed with Recommendation"
+                }
+                countdown={countdown}
+                isPaused={isPaused}
+                onPause={onPause}
+                onProceed={handleProceed}
+                isLoading={isLoading}
+                disabled={!selectedOption && !recommended}
+              />
+            </div>
+          ) : (
+            <div className="w-full flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold">
+              <CheckCircle2 className="h-4 w-4" />
+              <span>
+                {selectionStatus === "agent"
+                  ? "Suggested by Agent, Approved by You"
+                  : "Selected by You"}
+              </span>
+            </div>
+          )}
+        </CardFooter>
+      </Card>
+    );
+  },
+);
+
+MCQCard.displayName = "MCQCard";