import { ChangeEvent } from "react";

interface SearchAndLayoutProps {
    search: string;
    setSearch: (value: string) => void;
    itemPerPage: number;
    setItemPerPage: (value: number) => void;
}

const SearchAndLayout = ({
    search,
    setSearch,
    itemPerPage,
    setItemPerPage
}: SearchAndLayoutProps) => (
    <div className="flex gap-2 items-center pt-4">
        <input
            type="text"
            placeholder="Search..."
            className="input input-bordered w-full"
            value={search}
            onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
        />
        <select
            className="select w-24"
            value={itemPerPage}
            onChange={(e: ChangeEvent<HTMLSelectElement>) => 
                setItemPerPage(Number(e.target.value))
            }
        >
            <option disabled>Layout</option>
            <option value={5}>List</option>
            <option value={10}>Grid</option>
        </select>
    </div>
);

export default SearchAndLayout;