import type {
  CrumbReactionSummary,
  PublicProfile,
} from '@crumbs/core/schemas'
import {View} from 'react-native'

import {ReactionChips} from '@/components/reaction-chips'
import {Card, CardRowTitle} from '@/components/ui/card'
import {Link} from '@/components/ui/link'
import {Thumbnail} from '@/components/ui/thumbnail'
import {Text} from '@/components/ui/typography'
import {
  atoms as a,
  pressed as pressedStyle,
  useTheme,
} from '@/sprinkles'
import type {Crumb} from '@/stores/crumbs'

// carousel card for a friend's standout crumb: optional image over the crumb
// name, its author + reaction tally, and trailing meta (distance), linking
// straight to the crumb rather than the place
export const CrumbPreviewCard = ({
  crumb,
  author,
  reactions,
  meta,
}: {
  crumb: Crumb
  author: PublicProfile
  reactions: CrumbReactionSummary[]
  meta: string
}) => {
  const t = useTheme()
  return (
    <Link href={`/crumb/${crumb.id}`} accessibilityLabel={crumb.name}>
      {(isPressed) => (
        <Card
          padded={false}
          style={[
            a.gap_sm,
            a.p_sm,
            {minWidth: 150, maxWidth: 220},
            isPressed && pressedStyle,
          ]}
        >
          {crumb.imageUrl ? (
            <Thumbnail
              uri={crumb.imageUrl}
              width="100%"
              aspectRatio={16 / 9}
              accessibilityLabel={crumb.name}
            />
          ) : null}
          <View style={[a.flex_row, a.align_center, a.gap_xs]}>
            {crumb.status === 'done' ? (
              <Text emoji style={a.text_sm}>
                ✅
              </Text>
            ) : null}
            <CardRowTitle numberOfLines={1} style={a.flex_1}>
              {crumb.name}
            </CardRowTitle>
          </View>
          <View
            style={[
              a.flex_row,
              a.align_center,
              a.justify_between,
              a.gap_sm,
            ]}
          >
            <Text
              numberOfLines={1}
              style={[a.flex_1, t.atoms.text_contrast_medium]}
            >
              @{author.handle}
            </Text>
            <ReactionChips reactions={reactions} />
          </View>
          <Text style={t.atoms.text_contrast_medium}>{meta}</Text>
        </Card>
      )}
    </Link>
  )
}
