import React from 'react'

import Card from '@mui/material/Card/index.js'
import CardContent from '@mui/material/CardContent/index.js'
import Divider from '@mui/material/Divider/index.js'

import { Markdown } from '../Markdown/index.js'

import { recipeType } from '../../enums.js'
import { recipeCategories } from '../../data/maps.js'
import { RecipeList } from '../RecipeList/RecipeList.js'

import { TabPanel } from './TabPanel/index.js'

interface KitchenTabPanelProps {
  currentTab: number
  index: number
  learnedKitchenRecipes: string[]
}

export function KitchenTabPanel({
  currentTab,
  index,
  learnedKitchenRecipes,
}: KitchenTabPanelProps) {
  return (
    <TabPanel value={currentTab} index={index}>
      <RecipeList
        learnedRecipes={learnedKitchenRecipes}
        allRecipes={recipeCategories[recipeType.KITCHEN]}
      />
      <Divider />
      <ul className="card-list">
        <li>
          <Card>
            <CardContent>
              <Markdown
                {...{
                  children: `Kitchen recipes are learned by selling crops and animal products. Sell as much as you can of a wide variety of items!`,
                }}
              />
            </CardContent>
          </Card>
        </li>
      </ul>
    </TabPanel>
  )
}