import type { FC } from 'react';
import React from 'react';
import { SegmentedInput } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import { CLASSNAME } from './publishersListPage';

interface Props {
    searchValue?: string | null;
    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const PageControls: FC<Props> = ({ searchValue, onSearchChange }) => (
    <div className="PageControls mb-3">
        <div className="row">
            <div className="col-xs-12 col-md-6 col-lg-4">
                <SegmentedInput>
                    <SegmentedInput.Static>
                        <GlyphIcon name="search" size={16} />
                    </SegmentedInput.Static>
                    <input
                        type="text"
                        placeholder={formatMessage(
                            `${CLASSNAME}.searchPlaceholder`
                        )}
                        onChange={onSearchChange}
                        value={searchValue || ''}
                        className="form-control"
                    />
                </SegmentedInput>
            </div>
        </div>
    </div>
);

export default PageControls;