import { type ReactNode } from 'react';
import { type RadioButtonProps } from '../RadioButton';
import { type RadioButtonCardSlotRecipeVariant } from '../../styled-system/recipes';
import { type ResponsiveSlot } from '../types/responsive';
export type RadioButtonState = Pick<RadioButtonProps, 'checked' | 'disabled'>;
/**
 * Function type for rendering RadioButtonCard details content.
 * Receives the current radio button state as a parameter.
 */
export type RadioButtonCardRenderDetailsSlot = (radioButtonState: RadioButtonState) => ReactNode;
/**
 * ResponsiveSlot type specifically for RadioButtonCard details content.
 * Supports different content for desktop and mobile viewports, with functions that receive RadioButtonState.
 */
export type RadioButtonCardResponsiveSlot = ResponsiveSlot<RadioButtonCardRenderDetailsSlot>;
export type RadioButtonCardProps = {
    /**
     * The layout of the radio button card.
     * Currently, the layout can be `horizontal` or `vertical`.
     *
     * @default `vertical`
     */
    layout?: RadioButtonCardSlotRecipeVariant['layout'];
    /**
     * Label text for explaining radio value.
     */
    label: string;
    /**
     * Content or function to render the details slot.
     *
     * @example
     * ```tsx
     * // Function-based (current usage - maintains backward compatibility)
     * renderDetailsSlot={(radioButtonState) => (
     *   <div>Status: {radioButtonState.checked ? 'Selected' : 'Not selected'}</div>
     * )}
     *
     * // ResponsiveSlot with static content
     * renderDetailsSlot={{
     *   base: <div>Desktop details content</div>,
     *   narrowViewport: <div>Mobile details content</div>
     * }}
     *
     * // ResponsiveSlot with functions
     * renderDetailsSlot={{
     *   base: (radioButtonState) => <div>Desktop: {radioButtonState.checked ? 'Yes' : 'No'}</div>,
     *   narrowViewport: (radioButtonState) => <div>Mobile: {radioButtonState.checked ? '✓' : '✗'}</div>
     * }}
     * ```
     */
    renderDetailsSlot?: RadioButtonCardResponsiveSlot | RadioButtonCardRenderDetailsSlot;
    /**
     * Whether to disable the responsive behavior.
     *
     * When set to `true`, the component maintains its layout regardless of viewport size.
     * When set to `false` (default), the component will automatically switch to vertical layout on narrow viewports.
     *
     * @default false
     */
    disableResponsive?: RadioButtonCardSlotRecipeVariant['disableResponsive'];
} & Omit<RadioButtonProps, 'label'>;