/**
* External dependencies
*/
import type { ReactElement } from 'react';
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
const OptionLayout = ( {
label,
secondaryLabel,
description,
secondaryDescription,
id,
}: Partial< PackageRateOption > ): ReactElement => {
return (
<div className="wc-block-components-radio-control__option-layout">
<div className="wc-block-components-radio-control__label-group">
{ label && (
<span
id={ id && `${ id }__label` }
className="wc-block-components-radio-control__label"
>
{ label }
</span>
) }
{ secondaryLabel && (
<span
id={ id && `${ id }__secondary-label` }
className="wc-block-components-radio-control__secondary-label"
>
{ secondaryLabel }
</span>
) }
</div>
<div className="wc-block-components-radio-control__description-group">
{ description && (
<span
id={ id && `${ id }__description` }
className="wc-block-components-radio-control__description"
>
{ description }
</span>
) }
{ secondaryDescription && (
<span
id={ id && `${ id }__secondary-description` }
className="wc-block-components-radio-control__secondary-description"
>
{ secondaryDescription }
</span>
) }
</div>
</div>
);
};
export default OptionLayout;