import type {TrailMember} from '@crumbs/core/schemas'
import {type Href} from 'expo-router'
import {View} from 'react-native'

import {AvatarStack} from '@/components/avatar-stack'
import {Card, CardRowTitle} from '@/components/ui/card'
import {Link} from '@/components/ui/link'
import {Text} from '@/components/ui/typography'
import {
  atoms as a,
  pressed as pressedStyle,
  useTheme,
} from '@/sprinkles'

// the carousel preview card shared by the home tiles: a title over
// avatars + trailing meta, linking through
export const PreviewCard = ({
  href,
  accessibilityLabel,
  title,
  members,
  meta,
}: {
  href: Href
  accessibilityLabel: string
  title: string
  members: TrailMember[]
  meta: string
}) => {
  const t = useTheme()
  return (
    <Link href={href} accessibilityLabel={accessibilityLabel}>
      {(isPressed) => (
        <Card
          padded={false}
          style={[
            a.gap_sm,
            a.p_sm,
            {minWidth: 150, maxWidth: 220},
            isPressed && pressedStyle,
          ]}
        >
          <CardRowTitle numberOfLines={1}>{title}</CardRowTitle>
          <View
            style={[
              a.flex_row,
              a.align_center,
              a.justify_between,
              a.gap_sm,
            ]}
          >
            <AvatarStack members={members} />
            <Text style={t.atoms.text_contrast_medium}>{meta}</Text>
          </View>
        </Card>
      )}
    </Link>
  )
}
