import CloseIcon from "../icons/close.svg";

const Filter = ({ 
  selectedBrand,
  onChangeBrand,
  selectedCategory,
  onChangeCategory,
  brands,
  categories,
  isActiveFilter, 
  closeFilter,
  onSubmit
}) => {
  return (
    <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActiveFilter ? 'bottom-0' : 'bottom-[-100%]'}`}>
      <div className="flex justify-between items-center mb-5">
        <h2 className="text-xl font-semibold">Filter Produk</h2>
        <button onClick={closeFilter}>
          <CloseIcon className="w-7" />
        </button>
      </div>
      <form className="flex flex-col gap-y-4" onSubmit={onSubmit}>
        <div>
          <label>Kategori</label>
          <select className="form-input mt-2" value={selectedCategory} onChange={onChangeCategory}>
            <option value="">Pilih kategori...</option>
            {categories?.map((category, index) => (
              <option key={index} value={category}>{category}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Brand</label>
          <select className="form-input mt-2" value={selectedBrand} onChange={onChangeBrand}>
            <option value="">Pilih brand...</option>
            {brands?.map((brand, index) => (
              <option key={index} value={brand}>{brand}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Harga</label>
          <div className="flex gap-x-4 mt-2 items-center">
            <input className="form-input"/>
            <span>-</span>
            <input className="form-input"/>
          </div>
        </div>
        <button type="submit" className="btn-yellow font-semibold mt-4 w-full">
          Terapkan Filter
        </button>
      </form>
    </div>
  )
};

export default Filter;