import React from 'react';
import { FaSearch } from 'react-icons/fa';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Dropdown, IOptionsProps } from '../../Dropdown';

interface CraftBookHeaderProps {
  categoryOptions: IOptionsProps[];
  onCategoryChange: (value: string) => void;
  onSearchToggle: () => void;
}

export const CraftBookHeader: React.FC<CraftBookHeaderProps> = ({
  categoryOptions,
  onCategoryChange,
  onSearchToggle,
}) => {
  return (
    <Container>
      <Title>Craftbook</Title>
      <Controls>
        <DropdownWrapper>
          <Dropdown
            options={categoryOptions}
            onChange={onCategoryChange}
            width="200px"
          />
        </DropdownWrapper>
        <SearchButton onClick={onSearchToggle}>
          <FaSearch size={16} />
        </SearchButton>
      </Controls>
    </Container>
  );
};

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 16px 0;
`;

const Title = styled.h1`
  font-size: 1.2rem;
  color: ${uiColors.yellow} !important;
  margin: 0;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
`;

const Controls = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  left: -2rem;
`;

const DropdownWrapper = styled.div`
  width: 200px;
`;

const SearchButton = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 32px;
  height: 32px;
  color: ${uiColors.yellow};
  opacity: 0.8;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    opacity: 1;
  }
`;
