Symptoms.tsx

import FlippableCard from "./FlippableCard";
import {symptomsCards} from "../../public/lit/texts";
import {languageAtom} from "../atoms/languageAtom";
import {useRecoilValue} from "recoil";
import {Texts} from "../hooks/useAnimate";

const Symptoms = () => {
    const language = useRecoilValue(languageAtom);
    return (
        <div className="flex h-screen">
            <div className="w-2/6 p-4"></div>
            <div className="w-4/6 p-4">
                <div className="grid grid-rows-2 grid-cols-4 gap-4">
                    {symptomsCards.map((card) => (
                        <FlippableCard
                            key={card.id}
                            image={card.image}
                            text={card.text[language as keyof Texts]}
                            alt={card.id}
                        />
                    ))}
                </div>
            </div>
        </div>
    );
}
export default Symptoms;