/**
 * CollapsibleSection — a Section header with a chevron button on the far right
 * that collapses/expands the body. Used on plant-detail tiles (Identity,
 * Environment, Setup, Care Guidance) so the user can curate their view.
 * Collapse state is persisted per-plant via SavedPlantProfile.collapsedSections.
 */
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { green, dark } from '../constants/theme';

interface Props {
  title: string;
  collapsed: boolean;
  onToggle: () => void;
  /** When collapsed, render this (e.g. the action buttons row) instead of the body. */
  collapsedFooter?: React.ReactNode;
  children: React.ReactNode;
}

export function CollapsibleSection({ title, collapsed, onToggle, collapsedFooter, children }: Props) {
  return (
    <View>
      <View style={styles.headerRow}>
        <Text style={styles.title}>{title}</Text>
        <TouchableOpacity
          style={styles.chevronBtn}
          activeOpacity={0.7}
          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
          onPress={onToggle}
        >
          <Text style={[styles.chevron, collapsed && styles.chevronCollapsed]}>⌄</Text>
        </TouchableOpacity>
      </View>
      {collapsed ? (
        collapsedFooter ? <View style={styles.footer}>{collapsedFooter}</View> : null
      ) : (
        <View>{children}</View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  headerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 4,
  },
  title: {
    fontSize: 18,
    fontWeight: '800',
    color: dark,
  },
  chevronBtn: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  chevron: {
    fontSize: 22,
    color: green,
    fontWeight: '900',
    lineHeight: 24,
    transform: [{ rotate: '0deg' }],
  },
  chevronCollapsed: {
    transform: [{ rotate: '-90deg' }],
  },
  footer: {
    marginTop: 4,
  },
});