import type {
  BrowserAnnotationDesignChange,
  BrowserAnnotationElement,
} from '~/store/browser-panel'

export const browserAnnotationSelectedElementFixture = {
  id: 'element-0',
  tagName: 'BUTTON',
  label: 'Start free trial',
  description: 'type=button',
  role: 'button',
  selector: 'main > section.hero:nth-of-type(1) > div.actions:nth-of-type(1) > button.cta:nth-of-type(1)',
  attributes: {
    className: 'cta primary',
    type: 'button',
    testId: 'hero-cta',
  },
  rect: {
    x: 96,
    y: 312,
    width: 168,
    height: 44,
  },
  styles: {
    color: 'rgb(255, 255, 255)',
    backgroundColor: 'rgb(17, 17, 17)',
    opacity: '1',
    fontFamily: 'Inter, ui-sans-serif, system-ui',
    fontSize: '14px',
    fontWeight: '600',
    fontStyle: 'normal',
    lineHeight: '20px',
    letterSpacing: '0px',
    textAlign: 'center',
    textTransform: 'none',
    textDecorationLine: 'none',
    borderRadius: '9999px',
    borderColor: 'rgba(0, 0, 0, 0)',
    borderWidth: '0px',
    borderStyle: 'none',
    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.12)',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    overflow: 'visible',
    position: 'relative',
    zIndex: '1',
    width: '168px',
    height: '44px',
    marginTop: '0px',
    marginRight: '0px',
    marginBottom: '0px',
    marginLeft: '0px',
    paddingTop: '10px',
    paddingRight: '18px',
    paddingBottom: '10px',
    paddingLeft: '18px',
    rowGap: '0px',
    columnGap: '8px',
  },
  pageUrl: 'http://localhost:5174/',
  nearbyText: 'Start free trial',
  reactComponents: '<Button> <HeroActions>',
} satisfies BrowserAnnotationElement

export const browserAnnotationDesignChangesFixture = {
  backgroundColor: '#0b57d0',
  borderRadius: '12px',
  fontSize: '15px',
  letterSpacing: '0.01em',
  boxShadow: '0 8px 24px rgba(11, 87, 208, 0.28)',
  paddingLeft: '22px',
  paddingRight: '22px',
} satisfies BrowserAnnotationDesignChange
