// app/(root)/checkout/page.tsx (Server Component)
import CheckoutClient from './CheckoutClient';
import pool from '@/lib/db/db';

// Generate Metadata
export async function generateMetadata() {
  return {
    title: 'Checkout',
    description: 'Checkout page for the e-commerce store',
  };
}

// Define the Country type
export type Country = {
  id: string;
  name: string;
  iso3: string | null;
  numeric_code: string | null;
  phone_code: string | null;
  capital: string | null;
  currency: string | null;
  currency_name: string | null;
  continent: string | null;
  continent_code: string | null;
  region: string | null;
  subregion: string | null;
  emoji: string | null;
  emoji_unicode: string | null;
  is_active: boolean;
};

// Fetch countries from database
async function getCountries(): Promise<Country[]> {
  try {
    const query = `
      SELECT 
        id,
        name,
        iso3,
        numeric_code,
        phone_code,
        capital,
        currency,
        currency_name,
        continent,
        continent_code,
        region,
        subregion,
        emoji,
        emoji_unicode,
        is_active
      FROM countries 
      WHERE is_active = true
      ORDER BY name ASC
    `;
    
    const result = await pool.query(query);
    return result.rows;
  } catch (error) {
    console.error('Error fetching countries:', error);
    return []; // Return empty array on error
  }
}

// This is a Server Component - just a wrapper
export default async function CheckoutPage() {
  const countries = await getCountries();
  
  return <CheckoutClient countries={countries} />;
}