import {type ReactNode} from 'react'
import {View} from 'react-native'

import {Card, CardLabel} from '@/components/ui/card'
import {
  atoms as a,
  pressed as pressedStyle,
  type ViewStyleProp,
} from '@/sprinkles'

// shared height for square-ish bento tiles so a row lines up regardless
// of content; width is split by the row, height is fixed
export const TILE_HEIGHT = 164

type TileProps = {
  label: string
  children: ReactNode
  action?: ReactNode
  pressed?: boolean
  style?: ViewStyleProp
}

// labeled bento surface: a card with a small header (+ optional action)
// and a content area
export const Tile = ({
  label,
  children,
  action,
  pressed,
  style,
}: TileProps) => (
  <Card
    padded={false}
    style={[a.p_md, a.gap_sm, pressed && pressedStyle, style]}
  >
    <View
      style={[
        a.flex_row,
        a.align_center,
        a.justify_between,
        a.gap_sm,
      ]}
    >
      <CardLabel>{label}</CardLabel>
      {action}
    </View>
    {children}
  </Card>
)
