import React from 'react'

export default function WorldRecurrenceHelper({ enabled, recurrenceKey, editionYear, recurrenceKeyError, editionYearError }) {
  if (!enabled) {
    return (
      <div className="rounded-[24px] border border-dashed border-white/10 bg-white/[0.02] p-4 text-sm leading-6 text-slate-400">
        Turn on recurrence when this world belongs to a campaign family such as Halloween, Retro Month, or Pixel Week and needs a reusable edition pattern.
      </div>
    )
  }

  const exampleKey = recurrenceKey || 'halloween'
  const exampleYear = editionYear || new Date().getFullYear()

  return (
    <div className="rounded-[24px] border border-sky-300/15 bg-sky-400/10 p-4 text-sm text-slate-200">
      <div className="font-semibold text-white">Recurring world guidance</div>
      <div className="mt-2 space-y-2 leading-6 text-slate-300">
        <p>Use the recurrence key to identify the campaign family. Example: <span className="font-semibold text-white">{exampleKey}</span>.</p>
        <p>Use the edition year for the specific annual or seasonal instance. Example: <span className="font-semibold text-white">{exampleYear}</span>.</p>
        <p className="text-sky-100">Example output: {exampleKey === '' ? 'Halloween' : exampleKey.replace(/-/g, ' ')} {exampleYear} is part of the recurring world <span className="font-semibold text-white">{exampleKey}</span>.</p>
      </div>

      {recurrenceKeyError || editionYearError ? (
        <div className="mt-3 rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-xs leading-5 text-rose-100">
          {recurrenceKeyError || editionYearError}
        </div>
      ) : null}
    </div>
  )
}