"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardDescription = exports.CardBody = exports.Card = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _useInteractionState = require("../hooks/useInteractionState.js");
var _tokens = require("../styles/tokens.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const CardRootComponent = ({
  children,
  variant = 'elevated',
  style,
  onPress,
  disabled = false,
  accessibilityLabel,
  testID
}) => {
  const theme = (0, _useTheme.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
  } = (0, _useInteractionState.useInteractionState)();
  const containerStyle = (0, _react.useMemo)(() => {
    const base = {
      borderRadius: _tokens.borderRadius.md,
      overflow: 'hidden'
    };
    switch (variant) {
      case 'elevated':
        base.backgroundColor = theme.colors.card;
        if (_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [containerStyle, disabled && {
      opacity: 0.5
    }, style],
    accessibilityLabel: accessibilityLabel,
    testID: testID,
    children: children
  });
};
const CardHeaderComponent = ({
  children,
  style
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: [{
    paddingHorizontal: _tokens.space.lg,
    paddingTop: _tokens.space.lg,
    paddingBottom: _tokens.space.sm
  }, style],
  children: children
});
const CardBodyComponent = ({
  children,
  style
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: [{
    paddingHorizontal: _tokens.space.lg,
    paddingVertical: _tokens.space.sm
  }, style],
  children: children
});
const CardFooterComponent = ({
  children,
  style
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: [{
    paddingHorizontal: _tokens.space.lg,
    paddingTop: _tokens.space.sm,
    paddingBottom: _tokens.space.lg,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    gap: _tokens.space.sm
  }, style],
  children: children
});
const CardTitleComponent = ({
  children,
  style,
  numberOfLines
}) => {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: [{
      fontSize: 17,
      fontWeight: '600',
      color: theme.colors.text,
      lineHeight: 22
    }, style],
    numberOfLines: numberOfLines,
    children: children
  });
};
const CardDescriptionComponent = ({
  children,
  style,
  numberOfLines
}) => {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
    style: [{
      fontSize: 14,
      color: theme.colors.textSecondary,
      lineHeight: 20
    }, style],
    numberOfLines: numberOfLines,
    children: children
  });
};
const Card = exports.Card = /*#__PURE__*/(0, _react.memo)(CardRootComponent);
Card.displayName = 'Card';
const CardHeader = exports.CardHeader = /*#__PURE__*/(0, _react.memo)(CardHeaderComponent);
CardHeader.displayName = 'CardHeader';
const CardBody = exports.CardBody = /*#__PURE__*/(0, _react.memo)(CardBodyComponent);
CardBody.displayName = 'CardBody';
const CardFooter = exports.CardFooter = /*#__PURE__*/(0, _react.memo)(CardFooterComponent);
CardFooter.displayName = 'CardFooter';
const CardTitle = exports.CardTitle = /*#__PURE__*/(0, _react.memo)(CardTitleComponent);
CardTitle.displayName = 'CardTitle';
const CardDescription = exports.CardDescription = /*#__PURE__*/(0, _react.memo)(CardDescriptionComponent);
CardDescription.displayName = 'CardDescription';
//# sourceMappingURL=Card.js.map