Untitled

import { useState } from "react";
import { Card } from "react-bootstrap";
import { Input, Button } from "antd"; // Using Ant Design for input & button
import { MessageSquare, Briefcase, Search } from "lucide-react";

import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap styles
import "antd/dist/reset.css"; // Import Ant Design styles

export default function StudentJobApp() {
  const [search, setSearch] = useState("");
  const jobs = [
    { title: "Marketing Intern", company: "ABC Marketing", location: "Tirana" },
    { title: "Software Developer Intern", company: "TechHub Albania", location: "Durres" },
    { title: "Finance Assistant", company: "Bank of Albania", location: "Tirana" },
  ];

  return (
    <div className="p-4 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">StudentJob Albania</h1>
      <div className="d-flex gap-2 mb-4">
        <Input
          type="text"
          placeholder="Search jobs..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <Button type="primary">
          <Search className="h-5 w-5" />
        </Button>
      </div>
      <div className="grid gap-4">
        {jobs
          .filter((job) => job.title.toLowerCase().includes(search.toLowerCase()))
          .map((job, index) => (
            <Card key={index} className="p-3 border rounded-lg">
              <Card.Body>
                <h2 className="h5 font-weight-bold d-flex align-items-center gap-2">
                  <Briefcase className="h-5 w-5" /> {job.title}
                </h2>
                <p className="text-muted">{job.company} - {job.location}</p>
                <Button className="mt-2" type="primary">Apply Now</Button>
              </Card.Body>
            </Card>
          ))}
      </div>
      <div className="mt-4 text-center">
        <Button type="dashed" className="d-flex align-items-center gap-2">
          <MessageSquare className="h-5 w-5" /> Contact Employers
        </Button>
      </div>
    </div>
  );
}