"use client";
import { getOnsets } from "@/actions/prosody";
import type { ProsodySyllable, ProsodyWord } from "@/lib/types/cards";
import { useTransition, useState } from "react";

export async function SyllableBreakdown({ syl }: { syl: ProsodySyllable }) {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState<any[]>([]);
  function showOnset(e: React.MouseEvent) {
    e.stopPropagation();
    console.log(syl);
    startTransition(async () => {
      const data = await getOnsets(syl.onset);
      setData(data);
    });
  }
  console.log({ isPending });
  return (
    <div>
      <div>whole: {syl.ipa}</div>
      <div
        onClick={showOnset}
        className="text-blue-500 hover:text-blue-700 hover:underline"
      >
        onset: {syl.onset}
      </div>
      <div
        onClick={showOnset}
        className="text-blue-500 hover:text-blue-700 hover:underline"
      >
        nucleus: {syl.nucleus}
      </div>
      <div
        onClick={showOnset}
        className="text-blue-500 hover:text-blue-700 hover:underline"
      >
        coda: {syl.coda}
      </div>
      <div
        onClick={showOnset}
        className="text-blue-500 hover:text-blue-700 hover:underline"
      >
        tone: {syl.tone}
      </div>
      <div
        onClick={showOnset}
        className="text-blue-500 hover:text-blue-700 hover:underline"
      >
        tonename: {syl.tonen}
      </div>
      {data.length > 0 && (
        <div>
          {data.map((d) => (
            <div key={d.id}>
              <div>{d.spelling}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// Component for displaying examples
