"use client";

import { syllableAction, thaiAnalysis } from "@/actions/lang";
import { CardResponse } from "@/lib/types/cards";
import { ReactNode, useState, useTransition } from "react";
import { Spinner } from "../ui/spinner";
import Modal from "@/components/Modal";
import { getRandomHexColor } from "@/lib/utils";

const SyllableCard: React.FC<{ data: CardResponse }> = ({ data }) => {
  return (
    <div className="absolute w-full h-full bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col justify-center gap-8 items-center p-6">
      <p className="text-5xl cursor-pointer hover:text-blue-700 font-semibold text-slate-800 dark:text-slate-100 text-center">
        {data.expression.spelling}
      </p>
      <IpaDisplay ipaEntries={data.expression.ipa} />
    </div>
  );
};

export default SyllableCard;

const IpaDisplay = ({
  ipaEntries,
}: {
  ipaEntries: Array<{ ipa: string; tags?: string[] }>;
}) => {
  if (!ipaEntries || ipaEntries.length === 0) return null;
  return (
    <div className="flex items-center space-x-2 flex-wrap">
      {ipaEntries.map((entry, index) => {
        const tags = entry.tags ? entry.tags : [];
        return (
          <span key={index} className="text-lg text-blue-600 font-serif">
            {entry.ipa}{" "}
            {tags.length > 0 && (
              <span className="text-xs text-gray-500">({tags.join(", ")})</span>
            )}
          </span>
        );
      })}
    </div>
  );
};