import { Heart, PhoneIcon } from "lucide-react";

export default function Actions() {
  return (
    <div className="mt-4 bg-white">
        <div className="flex flex-col">
            <div className='flex flex-row justify-between px-2'>
                <p className="text-sm text-gray-600 mb-3">On Behalf : Myself</p>
                <p className="text-sm text-gray-600 mb-4 text-right">Last login : 15 min ago</p>
            </div>
            
            <div className="grid grid-cols-12 gap-2">
                <button className="col-span-3 md:col-span-3 flex items-center justify-center gap-1 border border-gray-300 rounded-md py-2 px-1 sm:px-3 text-gray-700 hover:bg-gray-50">
                    <Heart size={16} className='text-primary' />
                    <span className="text-xs sm:text-sm font-medium">Interest</span>
                </button>
                
                <button className="col-span-3 md:col-span-3 flex items-center justify-center gap-1 border border-gray-300 rounded-md py-2 px-1 sm:px-3 text-gray-700 hover:bg-gray-50">
                    <PhoneIcon size={16} className='text-primary' />
                    <span className="text-xs sm:text-sm font-medium">Contact</span>
                </button>
                
                <button className="col-span-4 md:col-span-3 flex items-center justify-center gap-1 border border-gray-300 rounded-md py-2 px-1 sm:px-3 text-gray-700 hover:bg-gray-50">
                    <img src='/src/images/feed/proposal.png' className='h-5 sm:h-6 object-fill' />
                    <span className="text-xs sm:text-sm font-medium">Proposal</span>
                </button>
                
                <button className="col-span-2 md:col-span-3 flex items-center justify-center border border-gray-300 rounded-md py-2 text-gray-700 hover:bg-gray-50">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
  );
}