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

import {CardRowTitle} from '@/components/ui/card'
import {Link} from '@/components/ui/link'
import {Tile, TILE_HEIGHT} from '@/components/ui/tile'
import {Text} from '@/components/ui/typography'
import {atoms as a, useTheme} from '@/sprinkles'

// a labelled preview tile linking to a profile subscreen
export function ProfileTile({
  label,
  href,
  count,
  noun,
  preview,
  emptyHint,
}: {
  label: string
  href: Href
  count: number
  noun: string
  preview?: string
  emptyHint: string
}) {
  const t = useTheme()
  return (
    <Link
      href={href}
      accessibilityLabel={label}
      style={[a.flex_1, {height: TILE_HEIGHT}]}
    >
      {(pressed) => (
        <Tile label={label} pressed={pressed} style={a.flex_1}>
          {count > 0 ? (
            <View style={[a.flex_1, a.justify_between, a.gap_sm]}>
              {preview ? (
                <CardRowTitle numberOfLines={2}>
                  {preview}
                </CardRowTitle>
              ) : (
                <View />
              )}
              <Text style={t.atoms.text_contrast_medium}>
                {pluralize(count, noun)}
              </Text>
            </View>
          ) : (
            <View style={[a.flex_1, a.justify_end]}>
              <Text style={t.atoms.text_contrast_medium}>
                {emptyHint}
              </Text>
            </View>
          )}
        </Tile>
      )}
    </Link>
  )
}
