import React, {FC} from "react";
import {FeaturedPreset, Preset} from "./FeaturedPreset";
import {__} from "../../globals";
import {Presets} from "./Presets";
import classNames from "classnames";

export type PresetDecorationProps = {
}

const dummyPresetsData: Preset[] = [
    {
        id: '1',
        name: __('Buy One, Get One Free'),
        description: __('Buy one item and get an extra item of the same type for free.'),
        example: __('Buy one T-shirt and get another T-shirt for free.'),
    },
    {
        id: '2',
        name: __('10% Off for new customers'),
        description: __('Offer a 10% discount to first-time buyers.'),
        example: '',
    },
    {
        id: '3',
        name: __('Buy X, Get Y Free'),
        description: __('Buy product A and get product B for free.'),
        example: __('Buy one Hoodie and get a T-shirt for free.'),
    },
];
export const PresetDecoration: FC<PresetDecorationProps> = ({}) => {
    // disable click events on this decoration
    return <div className="relative h-82 w-130">
        {dummyPresetsData.map((dummyPreset: Preset) => <div className={classNames("absolute pointer-events-none", {
            'rotate-[10deg] top-0 left-0 w-64': dummyPreset.id === '1',
            'rotate-[-10deg] top-5 right-0 w-64': dummyPreset.id === '2',
            'rotate-[5deg] top-20 left-1/2 -translate-x-1/2 w-64': dummyPreset.id === '3',
        })}><FeaturedPreset preset={dummyPreset}/></div>)}
    </div>;
}