import Image from "next/image";

export default function WerefoxCardTitle({ theme, title, title_emoji }) {
  if (theme == "Ada") {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan ">
          <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
            <Image
              src={title_emoji["src"]}
              layout="fill"
              objectFit="contain"
              alt={title_emoji["alt"]}
            />
          </span>
          <p className="inline text-md sm:text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
            {` ${title}`}
          </p>
        </div>
      );
    } else {
      return (
        <div className="rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
          <p className="p-4 text-center text-md sm:text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
            {title}
          </p>
        </div>
      );
    }
  } 
  if (theme == "Skye") {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink ">
          <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
            <Image
              src={title_emoji["src"]}
              layout="fill"
              objectFit="contain"
              alt={title_emoji["alt"]}
            />
          </span>
          <p className="inline text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
            {` ${title}`}
          </p>
        </div>
      );
    } else {
      return (
        <div className="rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
          <p className="p-4 text-center text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
            {title}
          </p>
        </div>
      );
    }
  } else {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red ">
          <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
            <Image
              src={title_emoji["src"]}
              layout="fill"
              objectFit="contain"
              alt={title_emoji["alt"]}
            />
          </span>
          <p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
            {` ${title}`}
          </p>
        </div>
      );
    } else {
      return (
        <div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
          <p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
            {title}
          </p>
        </div>
      );
    }
  }
}