import {View} from 'react-native'

import {Button} from '@/components/ui/button'
import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

export type EmptyStateAction = {
  label: string
  onPress: () => void
}

type EmptyStateProps = {
  message: string
  // optional cta rendered as part of the empty copy ("Write the first post")
  action?: EmptyStateAction
}

export const EmptyState = ({message, action}: EmptyStateProps) => {
  const t = useTheme()
  if (!action)
    return (
      <Text
        style={[
          a.text_center,
          a.py_2xl,
          t.atoms.text_contrast_medium,
        ]}
      >
        {message}
      </Text>
    )
  return (
    <View style={[a.align_center, a.py_lg, a.gap_xs]}>
      <Text style={t.atoms.text_contrast_medium}>{message}</Text>
      <Button
        label={action.label}
        variant="ghost"
        color="primary"
        size="small"
        onPress={action.onPress}
      />
    </View>
  )
}
