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

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