import { StyleSheet, Text, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";

import { GlassSurface } from "@/components/GlassSurface";
import { useAppTheme } from "@/contexts/ThemeContext";
import { fonts, spacing } from "@/constants/theme";
import { radius } from "@/lib/beenvoice-theme";

type CardProps = ViewProps & {
  title?: string;
  style?: StyleProp<ViewStyle>;
  variant?: "card" | "stat";
};

export function Card({ title, style, children, variant = "card", ...props }: CardProps) {
  const { colors } = useAppTheme();

  return (
    <GlassSurface style={StyleSheet.flatten(style)} radius={radius.lg} variant={variant}>
      <View style={styles.inner} {...props}>
        {title ? <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text> : null}
        {children}
      </View>
    </GlassSurface>
  );
}

const styles = StyleSheet.create({
  inner: {
    paddingHorizontal: 20,
    paddingVertical: spacing.md,
    gap: spacing.sm,
  },
  title: {
    fontSize: 15,
    fontFamily: fonts.bodySemiBold,
  },
});