import WCT from "./werefox-card-title";

export default function WerefoxCard({ theme, title_emoji, title, children }) {
  if (theme == "Ada") {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 space-y-4 text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan rounded-lg ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark">
          <WCT theme="Ada" title={title} title_emoji={title_emoji} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
            {children}
          </div>
        </div>
      );
    } else {
      return (
        <div className="p-4 space-y-4 text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan rounded-lg ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark">
          <WCT theme="Ada" title={title} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
            {children}
          </div>
        </div>
      );
    }
  } 
  if (theme == "Skye") {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
          <WCT theme="Skye" title={title} title_emoji={title_emoji} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
            {children}
          </div>
        </div>
      );
    } else {
      return (
        <div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
          <WCT theme="Skye" title={title} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
            {children}
          </div>
        </div>
      );
    }
  } else {
    if (Boolean(title_emoji)) {
      return (
        <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
          <WCT title={title} title_emoji={title_emoji} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
            {children}
          </div>
        </div>
      );
    } else {
      return (
        <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
          <WCT title={title} />
          <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
            {children}
          </div>
        </div>
      );
    }
  }
}