import { ButtonType } from "../basics/BasicButtonDefinitions"
import Button from "../basics/Button"
import SearchField from "../basics/SearchField"

/**
 * Toolbar for RecipeListPage containing searchfield, add recipe button and number of recipes
 */
type RecepeListToolbarProps = { 
    onSearchStringChanged: (searchString : string) => void
    onAddClicked: () => void
    numberOfRecipes : number
}

export default function RecipeListToolbar({onSearchStringChanged, onAddClicked, numberOfRecipes} : RecepeListToolbarProps){
    return (
        <div className="flex flex-wrap items-center gap-2 w-full">
            {/* Label: left-aligned on medium+ screens, full-width on small screens */}
            <div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
                <label className="label">{numberOfRecipes} Recipes</label>
            </div>

            {/* Search + Add button container: right-aligned on medium+ screens */}
            <div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
                <div className="flex-1 md:flex-none md:max-w-[500px]">
                <SearchField onSearchStringChanged={onSearchStringChanged} />
                </div>
                <Button
                    buttonType = {ButtonType.PrimaryButton}
                    className="flex-shrink-0"
                    onClick={onAddClicked}
                    text = "Add recipe"
                />
            </div>
        </div>
    )
}