import Row from "./Row";
import { __ } from "./globals";

const OfferFilters = ({offerCard}) => {
    const rowData = offerCard.data.options.customFilteredItemsColumn

    return <div className="pl-5">
                <div className="space-y-1 flex flex-col items-center text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-5 max-w-5 min-h-5 max-h-5">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                    </svg>
                    <div className="flex space-x-1">
                        <div className="min-w-3 max-w-3 min-h-3 max-h-3 bg-gray-350 rounded-6"></div>
                        <div className="min-w-3 max-w-3 min-h-3 max-h-3 bg-gray-350 rounded-full"></div>
                        <div className="min-w-5 max-w-5 min-h-3 max-h-3 bg-gray-350 rounded-6"></div>
                    </div>
                    <h1 className="text-smaller-1 text-gray-400 whitespace-nowrap">{__('Cart Items')}</h1>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-4 max-w-4 min-h-4 max-h-4">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3" />
                    </svg>
                </div>  
                <Row data={rowData} 
                     testableType="filters"
                     removable={false} 
                     supportsMultipleColumns={false} 
                     noConditionsOrFilterRender={() => false}
                />
           </div>;
}

export default OfferFilters;