import React from 'react';
import BpkCtaButton from 'bpk-component-cta-button';
import BaggageIcon from 'bpk-component-icon/sm/baggage';
import { withButtonAlignment } from 'bpk-component-icon';
 
const AlignedBaggageIcon = withButtonAlignment(BaggageIcon);
const icon = <AlignedBaggageIcon />;
 
export default () => (
  <div>
    <BpkCtaButton>Primary</BpkCtaButton>
    <BpkCtaButton large>Large primary</BpkCtaButton>
    <BpkCtaButton selected>Selected</BpkCtaButton>
    <BpkCtaButton secondary>Secondary</BpkCtaButton>
    <BpkCtaButton iconOnly>
      <span className="visually-hidden">Search</span>
    </BpkCtaButton>
    <BpkCtaButton icon={icon} iconDisabled={icon}>Custom Icon</BpkCtaButton>
  </div>
);