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;
  rightElement?: React.ReactNode;
}

export const SearchBar: React.FC<ISearchBarProps> = ({
  value,
  onChange,
  placeholder,
  className,
  rightElement,
}) => {
  const hasRightElement = Boolean(rightElement);

  return (
    <Container className={className}>
      <Input
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        className="rpgui-input"
        $hasRightElement={hasRightElement}
      />
      <IconContainer>
        <SearchIcon />
        {rightElement}
      </IconContainer>
    </Container>
  );
};

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

const Input = styled.input<{ $hasRightElement: boolean }>`
  width: 100%;
  padding-right: ${props =>
    props.$hasRightElement ? '6rem' : '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;
  gap: 0.5rem;
  pointer-events: none;
  z-index: 1;

  > * {
    pointer-events: auto;
  }
`;

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