'use client';

import { useState } from 'react';
import { Register } from './types';
import { Form, Card, Container, Row, Col } from 'react-bootstrap';

interface RegisterBrowserProps {
  registers: Register[];
}

export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredRegisters = registers.filter(register =>
    register.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    register.description.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <Container fluid>
      <Form.Group className="mb-3">
        <Form.Control
          type="text"
          placeholder="Search registers..."
          value={searchTerm}
          onChange={e => setSearchTerm(e.target.value)}
        />
      </Form.Group>
      <Row>
        {filteredRegisters.map(register => (
          <Col key={register.hex_address} xs={12} md={6} lg={4} className="mb-4">
            <Card>
              <Card.Header>
                <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address})
              </Card.Header>
              <Card.Body>
                <pre style={{ whiteSpace: 'pre-wrap' }}>{register.description}</pre>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
}