import React from 'react';
import Navbar from '../components/Navbar';
const Dashboard = () => {
  return (
  <>
    <Navbar />
    <div className="container-fluid p-4" style={{ backgroundColor: '#f8f9fa' }}>

      <div className="card border-0 shadow-sm mb-4 mx-auto mt-4" style={{ width: '85%', borderRadius: '12px' , height: '300px' }}>
        <div className="card-body p-4">
      <input
        type="text"
        className="form-control mb-3"
        placeholder="Write your research query here..."
        style={{ borderColor: '#0d6efd', borderWidth: '2px', padding: '1rem' }}
      />


          <div className="d-flex flex-wrap align-items-center gap-3">
            <div className="dropdown">
              <button 
                className="btn btn-outline-primary dropdown-toggle d-flex align-items-center gap-2"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                style={{ borderColor: '#0d6efd', borderWidth: '2px' }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-paperclip" viewBox="0 0 16 16">
                  <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5.5a1.5 1.5 0 0 1-3 0zm5 0v10.5a1.5 1.5 0 0 1-3 0V5.5a1.5 1.5 0 0 1-3 0V3z"/>
                </svg>
                Attachments
              </button>
              <ul className="dropdown-menu">
                <li><a className="dropdown-item" href="#">File 1</a></li>
                <li><a className="dropdown-item" href="#">File 2</a></li>
              </ul>
            </div>

            <div className="dropdown">
              <button 
                className="btn btn-outline-primary dropdown-toggle d-flex align-items-center gap-2"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                style={{ borderColor: '#0d6efd', borderWidth: '2px' }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-book" viewBox="0 0 16 16">
                  <path d="M1 2.828c.764-.763 2.077-.763 2.84 0l6.421 6.421a.75.75 0 0 0 .577.217.75.75 0 0 0 .577-.217L15.67 2.828A6.964 6.964 0 0 0 12 1.5a6.964 6.964 0 0 0-4.878 2.103L5 5.5a6.964 6.964 0 0 0-4.878 2.103z"/>
                </svg>
                Choose discipline
              </button>
              <ul className="dropdown-menu">
                <li><a className="dropdown-item" href="#">Computer Science</a></li>
                <li><a className="dropdown-item" href="#">Medicine</a></li>
              </ul>
            </div>

            <div className="dropdown">
              <button 
                className="btn btn-outline-primary dropdown-toggle d-flex align-items-center gap-2"
                type="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
                style={{ borderColor: '#0d6efd', borderWidth: '2px' }}
              >
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-file-earmark-text" viewBox="0 0 16 16">
                  <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/>
                </svg>
                Templates
              </button>
              <ul className="dropdown-menu">
                <li><a className="dropdown-item" href="#">Template 1</a></li>
                <li><a className="dropdown-item" href="#">Template 2</a></li>
              </ul>
            </div>

            {/* Create Button (Blue, not orange) */}
            <button 
              className="btn btn-primary ms-auto"
              style={{ borderRadius: '20px', padding: '0.5rem 1.5rem' }}
            >
              CREATE
            </button>
          </div>
        </div>
      </div>

      {/* Projects Section */}
      <h5 className="mb-3 fw-bold">Projects</h5>
      <div className="row g-4">
        {/* Project Card 1 */}
        <div className="col-md-4">
          <div className="card border-0 shadow-sm h-100" style={{ borderRadius: '12px' }}>
            <div className="card-body">
              <h6 className="card-title fw-bold mb-2">AI-Powered Summarization for Academic Research</h6>
              <p className="card-text text-muted">
                This project proposes the design and development of an AI-driven text summarization tool to assist...
              </p>
            </div>
          </div>
        </div>

        {/* Project Card 2 */}
        <div className="col-md-4">
          <div className="card border-0 shadow-sm h-100" style={{ borderRadius: '12px' }}>
            <div className="card-body">
              <h6 className="card-title fw-bold mb-2">AI-Powered Summarization for Academic Research</h6>
              <p className="card-text text-muted">
                This project proposes the design and development of an AI-driven text summarization tool to assist...
              </p>
            </div>
          </div>
        </div>

        {/* Project Card 3 */}
        <div className="col-md-4">
          <div className="card border-0 shadow-sm h-100" style={{ borderRadius: '12px' }}>
            <div className="card-body">
              <h6 className="card-title fw-bold mb-2">AI-Powered Summarization for Academic Research</h6>
              <p className="card-text text-muted">
                This project proposes the design and development of an AI-driven text summarization tool to assist...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    </>
  );
};

export default Dashboard;