import { __ } from "../../globals"
import { CardRenderer } from "../CardRenderers"
import { ComponentMeta } from "../ComponentsMeta"

export type AnyProductsOptions = {
}
export const type = 'AnyProducts'
export const AnyProductsMeta: ComponentMeta = {
    id: type,
    type: 'filters',
    category: 'default',
    configurable: false,
    icon({className}) {
        return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
        </svg>
    },
    fieldsMap: [
    ]
}

export const AnyProductsRenderer: CardRenderer<AnyProductsOptions> =  {
    type: AnyProductsMeta.id,
    icon: AnyProductsMeta.icon!,
    prefix: false,
    ComputedValue({context}) {
        return <div>{__('Any Products')}</div>
    },
    AboveComputedValue() {
        return false
    }
}
