import React from 'react';

export default function Proposals() {
  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h1 className="text-2xl font-bold mb-6">Proposals</h1>
      
      <div className="flex mb-6">
        <button className="px-4 py-2 bg-primary text-white rounded-lg mr-2">Received</button>
        <button className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">Sent</button>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {[1, 2, 3, 4].map((item) => (
          <div key={item} className="border rounded-lg overflow-hidden">
            <div className="h-40 bg-gray-200"></div>
            <div className="p-4">
              <h3 className="font-medium">User Name {item}</h3>
              <p className="text-sm text-gray-500">Age: 28 • Location: City</p>
              <p className="text-sm text-gray-500 mt-1">Profession: Engineer</p>
              <div className="mt-3 flex">
                <button className="bg-green-500 text-white px-3 py-1 rounded-lg text-sm mr-2">Accept</button>
                <button className="bg-red-500 text-white px-3 py-1 rounded-lg text-sm">Decline</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}