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

export const SearchList: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
  const { className } = props;
  const [searchActionValue, setSearchActionValue] = useState("");
  const handleOnSearch = useCallback((value: string) => {
    setSearchActionValue(value);
  }, []);
const theme = useTheme()
  return (
    <div className={className} css={searchHeaderContainerStyle(theme)}>
      <SearchHeader onSearch={handleOnSearch} title="Classes List" />
      <SearchListWithNewButton searchActionValue={searchActionValue} />
    </div>
  );
};

SearchList.displayName = "SearchList";
