import { FC, HTMLAttributes, useCallback, useState } from "react"
import { SearchHeader } from "@/page/App/components/Actions/SearchHeader"
import { ActionListWithNewButton } from "./listWithNewButton"
import { searchHeaderContainerStyle } from "./style"
import { useTheme } from "@mui/material"

export const ActionList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
  const { className } = props
 const theme = useTheme()
  const [searchActionValue, setSearchActionValue] = useState("")

  const handleOnSearch = useCallback((value: string) => {
    setSearchActionValue(value)
  }, [])

  return (
    <div className={className} css={searchHeaderContainerStyle(theme)}>
      <SearchHeader onSearch={handleOnSearch} />
      <ActionListWithNewButton searchActionValue={searchActionValue} />
    </div>
  )
}

ActionList.displayName = "ActionList"
