// dictionary.ts
import 'server-only';
import type { Locale } from '@/i18n.config';
import type { Dictionary } from './dictionaryTypes';

const dictionaries = {
  en: () => import('./dictionaries/en.json').then(module => module.default as Dictionary),
  ro: () => import('./dictionaries/ro.json').then(module => module.default as Dictionary)
};

export const getDictionary = async (locale: Locale): Promise<Dictionary> => {
  if (!dictionaries[locale]) {
    // Return a default dictionary or one of the existing ones
    return dictionaries['en']();
  }
  return dictionaries[locale]();
};

    async function fetchData() {
      try {
        const fetchedDictionary = await getDictionary(lang);
        setDictionary(fetchedDictionary);
      } catch (error) {
        console.error('Error fetching dictionary:', error);
      }

const data = await getDirectionary(lang)
return(
<>
<Component data={data}/ >
</>
)

const Page = ({params}) => {
const data = await getDictionary(params.lang)
...rest of the code

const Page = (props) => {
console.log(props)
...

const Page = (props) => {
console.log(props)
const data = await getDictionary(props.query.lang)
...

"use client";
import React, { useState, ChangeEvent } from 'react';
import TopNavigationBar from '../TopNavigationBar';
import PersonalInformation from './PersonalInformation';
import type { Dictionary } from '@/app/translation/dictionaryTypes';

const SignUp = () => {
    // State to manage form steps
    const [currentStep, setCurrentStep] = useState(0);

    // State to manage dictionary data
    const [dictionary, setDictionary] = useState<Dictionary | null>(null);

    // Define the structure of your form data
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        email: '',
        password: ''
    });

    // Handle change in form fields
    const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    // Define the components for each step
    const steps = [
        <PersonalInformation data={formData} handleChange={handleChange} />,
        // Add other steps here as needed...
    ];

    const signUp = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        // Implement sign-up logic with formData here
    };

    // Check if dictionary data is loaded
    if (!dictionary) {
        return <div>Loading...</div>;
    }

    return (
//UI
);
}

export default SignUp;

export default Page;

const SignUp = ({dictionary}){

<SignUp dictionary={data} />

// Check if dictionary data is loaded
    if (!dictionary) {
        return <div>Loading...</div>;
    }

console.log(data)