'use client';

import React, { useState } from "react";
import { Modal, Button, Form, FloatingLabel } from 'react-bootstrap';
import { motion } from "framer-motion";

interface SearchModalProps {
  showSearch: boolean;
  searchClose: () => void;
}

const SearchModal: React.FC<SearchModalProps> = ({showSearch,searchClose}) => {
    const [query, setQuery] = useState('');
    const handleSearch = async (e: React.FormEvent<HTMLFormElement>) => 
    {
        e.preventDefault();
        if(query)
        {
            window.open('https://www.google.com/search?q=site:vensysco.com '+query, '_blank');
            setQuery('');            
        }        
    };
    return (
    <Modal className="modal-search" show={showSearch} onHide={searchClose} centered>
        <Modal.Header className="rounded-5 px-4" closeButton>
            <Modal.Title>Web Search</Modal.Title>
        </Modal.Header>
        <Modal.Body className="p-4">
            <Form className='search-form' onSubmit={handleSearch}>
                <motion.div className="mb-4" whileInView={{scale:[0.3,1]}} transition={{duration:1.4}} viewport={{once:true,amount:0.5}}>
                    <FloatingLabel controlId="search-text" label="Enter Your Keyword here.." className="fw-bold">
                        <Form.Control className="rounded-pill" type="text" value={query} onChange={(e) => setQuery(e.target.value)} required />
                    </FloatingLabel>
                </motion.div>
                <motion.div className="d-grid" whileInView={{y:[-50,0]}} transition={{duration:1.6}} viewport={{once:true,amount:0.5}}>
                    <Button variant="outline-danger" size="lg" className="rounded-pill" type='submit'>Submit</Button>
                </motion.div>
            </Form>  
        </Modal.Body>
    </Modal>
    );
};

export default SearchModal;