"use strict";

import React, { memo, useMemo } from 'react';
import { View, Text, Pressable, Platform } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { useInteractionState } from "../hooks/useInteractionState.js";
import { borderRadius, space } from "../styles/tokens.js";
import { jsx as _jsx } from "react/jsx-runtime";
const CardRootComponent = ({
  children,
  variant = 'elevated',
  style,
  onPress,
  disabled = false,
  accessibilityLabel,
  testID
}) => {
  const theme = useTheme();
  // Drive the press-opacity via state instead of Pressable's function-form
  // `style`, which NativeWind v4's css-interop swallows (dropping the base
  // container style: background, radius, border, shadow).
  const {
    state: pressed,
    onIn: onPressIn,
    onOut: onPressOut
  } = useInteractionState();
  const containerStyle = useMemo(() => {
    const base = {
      borderRadius: borderRadius.md,
      overflow: 'hidden'
    };
    switch (variant) {
      case 'elevated':
        base.backgroundColor = theme.colors.card;
        if (Platform.OS === 'web') {
          base.boxShadow = `0px 1px 3px ${theme.colors.shadow}`;
        } else {
          base.shadowColor = theme.colors.shadow;
          base.shadowOffset = {
            width: 0,
            height: 1
          };
          base.shadowOpacity = 0.2;
          base.shadowRadius = 3;
          base.elevation = 2;
        }
        break;
      case 'outlined':
        base.backgroundColor = theme.colors.card;
        base.borderWidth = 1;
        base.borderColor = theme.colors.border;
        break;
      case 'filled':
        base.backgroundColor = theme.colors.backgroundSecondary;
        break;
    }
    return base;
  }, [variant, theme]);
  if (onPress) {
    return /*#__PURE__*/_jsx(Pressable, {
      style: [containerStyle, pressed && !disabled && {
        opacity: 0.85
      }, disabled && {
        opacity: 0.5
      }, style],
      onPress: onPress,
      onPressIn: disabled ? undefined : onPressIn,
      onPressOut: disabled ? undefined : onPressOut,
      disabled: disabled,
      accessibilityLabel: accessibilityLabel,
      accessibilityRole: "button",
      accessibilityState: {
        disabled
      },
      testID: testID,
      children: children
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: [containerStyle, disabled && {
      opacity: 0.5
    }, style],
    accessibilityLabel: accessibilityLabel,
    testID: testID,
    children: children
  });
};
const CardHeaderComponent = ({
  children,
  style
}) => /*#__PURE__*/_jsx(View, {
  style: [{
    paddingHorizontal: space.lg,
    paddingTop: space.lg,
    paddingBottom: space.sm
  }, style],
  children: children
});
const CardBodyComponent = ({
  children,
  style
}) => /*#__PURE__*/_jsx(View, {
  style: [{
    paddingHorizontal: space.lg,
    paddingVertical: space.sm
  }, style],
  children: children
});
const CardFooterComponent = ({
  children,
  style
}) => /*#__PURE__*/_jsx(View, {
  style: [{
    paddingHorizontal: space.lg,
    paddingTop: space.sm,
    paddingBottom: space.lg,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    gap: space.sm
  }, style],
  children: children
});
const CardTitleComponent = ({
  children,
  style,
  numberOfLines
}) => {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(Text, {
    style: [{
      fontSize: 17,
      fontWeight: '600',
      color: theme.colors.text,
      lineHeight: 22
    }, style],
    numberOfLines: numberOfLines,
    children: children
  });
};
const CardDescriptionComponent = ({
  children,
  style,
  numberOfLines
}) => {
  const theme = useTheme();
  return /*#__PURE__*/_jsx(Text, {
    style: [{
      fontSize: 14,
      color: theme.colors.textSecondary,
      lineHeight: 20
    }, style],
    numberOfLines: numberOfLines,
    children: children
  });
};
export const Card = /*#__PURE__*/memo(CardRootComponent);
Card.displayName = 'Card';
export const CardHeader = /*#__PURE__*/memo(CardHeaderComponent);
CardHeader.displayName = 'CardHeader';
export const CardBody = /*#__PURE__*/memo(CardBodyComponent);
CardBody.displayName = 'CardBody';
export const CardFooter = /*#__PURE__*/memo(CardFooterComponent);
CardFooter.displayName = 'CardFooter';
export const CardTitle = /*#__PURE__*/memo(CardTitleComponent);
CardTitle.displayName = 'CardTitle';
export const CardDescription = /*#__PURE__*/memo(CardDescriptionComponent);
CardDescription.displayName = 'CardDescription';
//# sourceMappingURL=Card.js.map