import type { ReactNode } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';

export type StoryCreateShortcutItem = {
  id: string;
  label: string;
  badge?: string;
  icon: ReactNode;
};

const SHORTCUT_WIDTH = 108;
const SHORTCUT_HEIGHT = 112;

export function StoryCreateShortcutRow({
  items,
  onPress,
}: {
  items: StoryCreateShortcutItem[];
  onPress: (id: string) => void;
}) {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.scrollContent}
    >
      {items.map((item) => (
        <Pressable
          key={item.id}
          onPress={() => onPress(item.id)}
          accessibilityRole="button"
          accessibilityLabel={item.label}
          style={({ pressed }) => [styles.card, pressed && { opacity: 0.88 }]}
        >
          {item.badge ? (
            <View style={styles.badge}>
              <Text style={styles.badgeText}>{item.badge}</Text>
            </View>
          ) : null}
          <View style={styles.iconWrap}>{item.icon}</View>
          <Text style={styles.label}>{item.label}</Text>
        </Pressable>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollContent: {
    paddingHorizontal: spacing.md,
    gap: spacing.sm,
    paddingBottom: spacing.sm,
  },
  card: {
    width: SHORTCUT_WIDTH,
    height: SHORTCUT_HEIGHT,
    borderRadius: m3Shape.cornerLarge,
    backgroundColor: m3Colors.surfaceContainerHigh,
    borderWidth: 1,
    borderColor: m3Colors.outlineVariant,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: spacing.sm,
    position: 'relative',
  },
  badge: {
    position: 'absolute',
    top: spacing.xs,
    right: spacing.xs,
    paddingHorizontal: spacing.xs,
    paddingVertical: 2,
    borderRadius: m3Shape.cornerExtraSmall,
    backgroundColor: m3Colors.secondary,
  },
  badgeText: {
    color: m3Colors.onSecondary,
    fontFamily: fonts.bold,
    fontSize: 10,
  },
  iconWrap: {
    marginBottom: spacing.xs,
  },
  label: {
    color: m3Colors.onSurface,
    ...m3Type.labelSmall,
    textAlign: 'center',
  },
});