import {type Href} from 'expo-router'
import {type ReactNode} from 'react'
import {View} from 'react-native'

import {Avatar} from '@/components/ui/avatar'
import {Button} from '@/components/ui/button'
import {CardRowTitle} from '@/components/ui/card'
import {Link} from '@/components/ui/link'
import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

// the accept/decline inbox row shared by friend requests and trail invites:
// avatar + title (+ subtitle) linking somewhere, with busy-guarded actions
export const ActionableRow = ({
  href,
  accessibilityLabel,
  avatar,
  title,
  subtitle,
  busy,
  onAccept,
  onDecline,
}: {
  href: Href
  accessibilityLabel: string
  avatar: {handle: string; uri: string | null}
  title: ReactNode
  subtitle?: ReactNode
  busy: boolean
  onAccept: () => void
  onDecline: () => void
}) => {
  const t = useTheme()
  return (
    <View style={[a.flex_row, a.align_center, a.gap_sm, a.py_lg]}>
      <Link
        href={href}
        accessibilityLabel={accessibilityLabel}
        style={a.flex_1}
      >
        <View style={[a.flex_row, a.align_center, a.gap_sm]}>
          <Avatar handle={avatar.handle} uri={avatar.uri} size={36} />
          <View style={a.flex_shrink}>
            <CardRowTitle>{title}</CardRowTitle>
            {subtitle != null && (
              <Text style={t.atoms.text_contrast_medium}>
                {subtitle}
              </Text>
            )}
          </View>
        </View>
      </Link>
      <Button
        label="Decline"
        variant="ghost"
        color="negative"
        disabled={busy}
        onPress={onDecline}
      />
      <Button
        label="Accept"
        color="primary"
        disabled={busy}
        onPress={onAccept}
      />
    </View>
  )
}
