import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Car, Search } from "lucide-react";

const cars = [ { id: 1, brand: "Volkswagen", model: "Golf TGI", year: 2020, price: "9,900€", image: "/images/golf.jpg", }, { id: 2, brand: "Tesla", model: "Model 3 Juniper", year: 2025, price: "34,500€", image: "/images/model3.jpg", }, ];

export default function CarDealerHomePage() { return ( <div className="p-6 space-y-6"> <header className="flex items-center justify-between"> <h1 className="text-2xl font-bold flex items-center gap-2"> <Car className="w-6 h-6" /> AutoMarket </h1> <div className="flex gap-2"> <Input placeholder="Αναζήτηση μάρκας ή μοντέλου..." /> <Button variant="outline"> <Search className="w-4 h-4" /> </Button> </div> </header>

<section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    {cars.map((car) => (
      <Card key={car.id} className="rounded-2xl shadow-md overflow-hidden">
        <img src={car.image} alt={car.model} className="w-full h-48 object-cover" />
        <CardContent className="p-4 space-y-2">
          <h2 className="text-lg font-semibold">{car.brand} {car.model}</h2>
          <p className="text-sm text-gray-500">Έτος: {car.year}</p>
          <p className="text-md font-bold">Τιμή: {car.price}</p>
          <Button className="w-full">Περισσότερα</Button>
        </CardContent>
      </Card>
    ))}
  </section>
</div>

); }