import { Cell } from '../grid/Cell'
import { BaseModal } from './BaseModal'

type Props = {
  isOpen: boolean
  handleClose: () => void
}

export const InfoModal = ({ isOpen, handleClose }: Props) => {
  return (
    <BaseModal title="How to play" isOpen={isOpen} handleClose={handleClose}>
      <p className="text-sm text-gray-500 dark:text-gray-300">
        Rate das 🍯le in 6 Versuchen. Nach jedem Versuch ändert sich die Farbe des Kästchens
        um anzuzeigen, wie nah man an der korrekten Lösung ist.
      </p>

      <div className="flex justify-center mb-1 mt-4">
        <Cell value="I" status="correct" />
        <Cell value="M" />
        <Cell value="K" />
        <Cell value="E" />
        <Cell value="R" />
      </div>
      <p className="text-sm text-gray-500 dark:text-gray-300">
        Der Buchstabe I ist an der korrekten Stelle.
      </p>

      <div className="flex justify-center mb-1 mt-4">
        <Cell value="B" />
        <Cell value="L" />
        <Cell value="U" status="present" />
        <Cell value="M" />
        <Cell value="E" />
      </div>
      <p className="text-sm text-gray-500 dark:text-gray-300">
        Der Buchstabe U ist in dem Wort enthalten, aber an der falschen Stelle.
      </p>

      <div className="flex justify-center mb-1 mt-4">
        <Cell value="W" />
        <Cell value="A" />
        <Cell value="B" />
        <Cell value="E" status="absent" />
        <Cell value="N" />
      </div>
      <p className="text-sm text-gray-500 dark:text-gray-300">
        Der Buchstabe E ist nicht in dem Wort enthalten.
      </p>
    </BaseModal>
  )
}