import {
	BtnWrapper,
	SearchRow,
	SearchbarStyle, SearchItem,
} from '../../../styles/Components';
import Button from '../button/Button';

const SearchBarLayout = ({ firstColumnData, secondColumnData, filter, direction, onReset, handleSubmit, isSearch = true }) => {
	return (
		<SearchbarStyle direction={direction}>
			<SearchRow>
				{firstColumnData.map((data, index) => (
					<SearchItem key={index}>{data}</SearchItem>
				))}
			</SearchRow>
			{secondColumnData && (
				<SearchRow>
					{secondColumnData.map((data, index) => (
						<SearchItem key={index}>{data}</SearchItem>
					))}
				</SearchRow>
			)}
			{filter && (
				<SearchRow>
					{filter}
				</SearchRow>
			)}
			{isSearch &&
				<SearchRow>
					<BtnWrapper $gap="8px">
						<Button theme="search" text="검색" handleClick={handleSubmit} type="button" />
						<Button theme="reset" handleClick={onReset} type="button" />
					</BtnWrapper>
				</SearchRow>
			}
		</SearchbarStyle>
	);
};

export default SearchBarLayout;


