import React from 'react';
import { FaSearch } from 'react-icons/fa';
import styled from 'styled-components';

interface ISearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
}

export const SearchBar: React.FC<ISearchBarProps> = ({
  value,
  onChange,
  placeholder,
  className,
}) => {
  return (
    <Container className={className}>
      <Input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        className="rpgui-input"
      />
      <IconContainer>
        <SearchIcon />
      </IconContainer>
    </Container>
  );
};

const Container = styled.div`
  position: relative;
  width: 100%;
`;

const Input = styled.input`
  width: 100%;
  padding-right: 2.5rem !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
  color: #ffffff !important;
  font-family: 'Press Start 2P', cursive !important;
  font-size: 0.875rem !important;

  &::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
`;

const IconContainer = styled.div`
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
`;

const SearchIcon = styled(FaSearch)`
  font-size: 1rem;
  color: #f59e0b;
  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.3));
`;
