import { forwardRef, type ComponentRef } from 'react';
import { View, type ImageSourcePropType } from 'react-native';
import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
import { cn } from '@cdx-ui/utils';
import { Image as ForgeImage } from '../Image/Image';
import { HStack, type HStackProps } from '../Stack/HStack';
import { Text } from '../Text';
import {
  insuranceDisclosureLogoVariants,
  insuranceDisclosureRootVariants,
  insuranceDisclosureTextVariants,
} from './styles';

export interface InsuranceDisclosureProps extends Omit<HStackProps, 'children'> {
  logoSource: string | ImageSourcePropType;
  logoAccessibilityLabel: string;
  label?: string;
  className?: string;
}

export const InsuranceDisclosure = forwardRef<
  ComponentRef<typeof HStack>,
  InsuranceDisclosureProps
>(function InsuranceDisclosure(
  { logoSource, logoAccessibilityLabel, label, className, style, ...props },
  ref,
) {
  return (
    <HStack
      ref={ref}
      space="md"
      className={cn(insuranceDisclosureRootVariants(), className)}
      style={style}
      {...props}
      {...mergeDataAttributes(props, dataAttributes({ slot: 'insurance-disclosure' }))}
    >
      <ForgeImage
        source={logoSource}
        accessibilityLabel={logoAccessibilityLabel}
        accessible
        resizeMode="contain"
        className={insuranceDisclosureLogoVariants()}
        {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-logo' }))}
      />
      {label ? (
        <View
          className="min-w-0 shrink"
          {...mergeDataAttributes({}, dataAttributes({ slot: 'insurance-disclosure-content' }))}
        >
          <Text size="xs" className={insuranceDisclosureTextVariants()}>
            {label}
          </Text>
        </View>
      ) : null}
    </HStack>
  );
});

InsuranceDisclosure.displayName = 'InsuranceDisclosure';