import { styled, View } from 'tamagui'

// Card — the standard rounded surface used across settings rows, detail
// panels, and any `<XStack py="$3" px="$4" bg="$backgroundSecondary">` block
// that was repeated inline. Tone drives the fill token so theme switches
// (and any future token updates) re-render correctly without touching call
// sites.
export const Card = styled(View, {
  name: 'Card',
  py: '$3',
  px: '$4',
  borderRadius: '$3',
  variants: {
    tone: {
      plain: { backgroundColor: '$background' },
      secondary: { backgroundColor: '$backgroundSecondary' },
      tertiary: { backgroundColor: '$backgroundTertiary' },
      bordered: {
        backgroundColor: '$background',
        borderWidth: 1,
        borderColor: '$borderColor',
      },
    },
    compact: {
      true: { py: '$2', px: '$3' },
    },
  } as const,
  defaultVariants: {
    tone: 'secondary',
  },
})
