import Image from "next/image";

export default function WerefoxCardTitle({ title, title_emoji }) {
  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>
    );
  }
}