"use client"
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import SideNav from './sidenav';
import NavBar from './navbar';

export default function Board(props) {
  return (
    <Container>
        <Row>
            <NavBar></NavBar>
        </Row>
        <Row>
            <Col><SideNav/></Col>
            <Col xs={6}>
                <Card style={{ width: '18rem' }}>
                <Card.Img 
                    variant="top" 
                    src="https://images.unsplash.com/photo-1685260807808-888c878b447f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=180&h=100&q=80" />
                <Card.Body>
                    <Card.Title>
                        Card Title
                    </Card.Title>
                    <Card.Text>
                        Some quick example text to build on the card title and make up the
                        bulk of the card's content.
                    </Card.Text>
                    <Button variant="primary">
                        Go somewhere
                    </Button>
                </Card.Body>
                </Card>
            </Col>
            <Col>3 of 3</Col>
        </Row>
        <Row>
            <Col>1 of 3</Col>
            <Col xs={5}>2 of 3 (wider)</Col>
            <Col>3 of 3</Col>
        </Row>
    </Container>
    
  );
}