import React from "react";
import { View, type ViewProps } from "react-native";
import { cn } from "../utils/cn";
import { Text } from "./text";

export interface CardProps extends ViewProps {
  className?: string;
  children?: React.ReactNode;
}

/** Card container with border and shadow. Dark-mode aware. */
export function Card({ className, children, ...props }: CardProps) {
  return (
    <View
      className={cn(
        // Full opacity, not the previous `/50` — every consumer of Card
        // sits on a plain `dark:bg-black` screen (every auth screen,
        // Settings, Profile), where a 50%-transparent near-black fill
        // is nearly indistinguishable from the background itself.
        // Reported as real: "the contrast is not great" on the mobile
        // Profile screen, 2026-08-17.
        "rounded-lg border border-border dark:border-neutral-800 bg-card dark:bg-neutral-900",
        "shadow-sm shadow-foreground/10",
        className
      )}
      {...props}
    >
      {children}
    </View>
  );
}

export function CardHeader({ className, children, ...props }: CardProps) {
  return (
    <View className={cn("p-6 pb-4", className)} {...props}>
      {children}
    </View>
  );
}

export function CardContent({ className, children, ...props }: CardProps) {
  return (
    <View className={cn("px-6 pb-6", className)} {...props}>
      {children}
    </View>
  );
}

export function CardFooter({ className, children, ...props }: CardProps) {
  return (
    <View
      className={cn(
        "flex-row items-center justify-end px-6 pb-6 pt-2",
        "border-t border-border dark:border-neutral-800",
        className
      )}
      {...props}
    >
      {children}
    </View>
  );
}

export interface CardTitleProps {
  className?: string;
  children?: React.ReactNode;
}

export function CardTitle({ className, children }: CardTitleProps) {
  return (
    <Text className={cn("text-xl font-semibold text-foreground dark:text-white", className)}>
      {children}
    </Text>
  );
}

export interface CardDescriptionProps {
  className?: string;
  children?: React.ReactNode;
}

export function CardDescription({ className, children }: CardDescriptionProps) {
  return (
    <Text className={cn("text-sm text-muted-foreground dark:text-neutral-400 mt-2", className)}>
      {children}
    </Text>
  );
}