import React from "react";

const Filters = () => {
  return (
    <aside className="w-full md:w-2/5 p-6   md:mr-6 mb-6 md:mb-0">
      <h2 className="text-2xl font-bold mb-6 text-gray-800">Filters</h2>

      <div className="mb-6">
        <label className="block text-sm font-semibold mb-2 text-gray-700">
          Price Range
        </label>
        <input type="range" min="0" max="500000" className="w-full" />
        <div className="flex justify-between text-gray-600 text-sm mt-1">
          <span>0 $</span>
          <span>500,000 $ </span>
        </div>
      </div>

      <div className="mb-6">
        <label className="block text-sm font-semibold mb-2 text-gray-700">
          Category
        </label>
        <select className="w-full border p-3 rounded-sm bg-gray-100 text-sm">
          <option>All</option>
          <option>Skincare</option>
          <option>Haircare</option>
          <option>Bodycare</option>
        </select>
      </div>

      <div className="mb-6">
        <label className="block text-sm font-semibold mb-2 text-gray-700">
          Availability
        </label>
        <div className="flex items-center">
          <input type="checkbox" className="mr-2" />
          <span className="text-gray-600 !text-sm">In Stock Only</span>
        </div>
      </div>

      <button className="w-full bg-blue-600 text-white py-3 rounded-lg text-sm font-semibold hover:bg-blue-800 transition-all">
        Apply Filters
      </button>
    </aside>
  );
};

export default Filters;
