import React from 'react'
import Link from 'next/link'
import '@/app/components/ApiModal.css'
const ApiModal = ({open, setOpen, api}) => {
  return (
    <div className="fade-in" style={{width: '100vw', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'fixed', zIndex: '1000', top: '0', left: '0', backgroundColor: 'rgba(0, 0, 0, 0.8)', backdropFilter: 'blur(10px)'}}>
        <div className="row" style={{justifyContent: 'space-between', alignItems: 'center', display: 'flex', flexWrap: 'wrap', position: 'fixed', zIndex: '1000', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: 'rgba(0, 10, 20, 0.8)', borderRadius: '10px', backdropFilter: 'blur(10px)', padding: '20px', width: '90%', maxHeight: '500px', overflowY: 'auto', maxWidth: '700px'}}>
<div className="modal-body">
    <div className="close gradient-text" style={{cursor: 'pointer', position: 'absolute', right: '10px', top: '10px', backgroundImage: 'linear-gradient(to right, #ff0000, #ffaaaa)'}} onClick={()=>setOpen(false)}>Close</div>
                <h3>URL: </h3><p>{api.url}</p>
                <h3>Description: </h3><p>{api.description}</p>
                <h3>Query: </h3><p>{api.query}</p>
                <h3>Response: </h3><p>{api.response}</p>
                <h3>Method: </h3><p>{api.method || 'GET'}</p>
                <h3>Test URL: </h3><Link href={api.testURL|| '#'}>Try it</Link>
            </div>
        </div>
    </div>
    
  )
}

export default ApiModal