/**
 * TabataTip — Displays physiotherapist advice during exercise
 */

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { NAVY, ORANGE, TEXT } from '@/src/shared/constants/colors'
import { FONT_FAMILY } from '@/src/shared/constants/typography'
import { SPACING, RADIUS, LAYOUT } from '@/src/shared/constants'

interface TabataTipProps {
  tip: string
  visible: boolean
}

export function TabataTip({ tip, visible }: TabataTipProps) {
  if (!visible || !tip) return null

  return (
    <View style={styles.container}>
      <Text style={styles.icon}>📋</Text>
      <Text style={styles.tip} numberOfLines={3}>{tip}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    backgroundColor: NAVY[800],
    borderRadius: RADIUS.MD,
    padding: SPACING[3],
    marginHorizontal: LAYOUT.SCREEN_PADDING,
    gap: SPACING[2],
    borderWidth: 1,
    borderColor: ORANGE.DIM,
  },
  icon: {
    fontSize: 16,
    marginTop: SPACING[0],
  },
  tip: {
    flex: 1,
    fontFamily: FONT_FAMILY.SANS,
    fontSize: 13,
    lineHeight: 18,
    color: TEXT.PRIMARY,
  },
})
