import {pluralize} from '@crumbs/core/text'

import {PreviewCard} from '@/components/home/preview-card'
import {SeeAllLink} from '@/components/see-all-link'
import {Carousel} from '@/components/ui/carousel'
import {Tile} from '@/components/ui/tile'
import {Text} from '@/components/ui/typography'
import {useTheme} from '@/sprinkles'
import {useQuickTrails} from '@/stores/trails'

export const PinnedTile = () => {
  const t = useTheme()
  const quick = useQuickTrails()

  return (
    <Tile
      label="Pinned"
      action={<SeeAllLink href="/trails" label="See all trails" />}
    >
      {quick.length === 0 ? (
        <Text style={t.atoms.text_contrast_medium}>
          Pin a trail for quick access
        </Text>
      ) : (
        <Carousel>
          {quick.map((trail) => (
            <PreviewCard
              key={trail.id}
              href={`/trail/${trail.id}`}
              accessibilityLabel={trail.name}
              title={trail.name}
              members={trail.members}
              meta={pluralize(trail.crumbCount, 'crumb')}
            />
          ))}
        </Carousel>
      )}
    </Tile>
  )
}
