import React from 'react';
import styled from 'styled-components';
import { Dropdown, IOptionsProps } from '../../Dropdown';
import { SearchBar } from '../SearchBar/SearchBar';

interface ISearchHeaderProps {
  searchOptions?: {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
  };
  filterOptions?: {
    options: IOptionsProps[];
    selectedOption: string;
    onOptionChange: (value: string) => void;
  };
  className?: string;
}

export const SearchHeader: React.FC<ISearchHeaderProps> = ({
  searchOptions,
  filterOptions,
  className,
}) => {
  if (!searchOptions && !filterOptions) return null;

  return (
    <HeaderContainer className={className}>
      <HeaderContent>
        {searchOptions && (
          <SearchContainer>
            <StyledSearchBar
              value={searchOptions.value}
              onChange={searchOptions.onChange}
              placeholder={searchOptions.placeholder || 'Search...'}
            />
          </SearchContainer>
        )}
        {filterOptions && (
          <FilterContainer>
            <StyledDropdown
              options={filterOptions.options}
              onChange={filterOptions.onOptionChange}
              width="200px"
            />
          </FilterContainer>
        )}
      </HeaderContent>
    </HeaderContainer>
  );
};

const HeaderContainer = styled.div``;

const HeaderContent = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 4px;
`;

const SearchContainer = styled.div`
  flex: 1;
`;

const FilterContainer = styled.div`
  display: flex;
  justify-content: flex-end;
`;

const StyledSearchBar = styled(SearchBar)`
  width: 100%;
`;

const StyledDropdown = styled(Dropdown)`
  min-width: 150px;
`;
