import { createThemedStyles } from '../../theme';

// Styling for the composer prompt-suggestion chips, matching the web builder's new
// design-system variant (DS `Chip skin="light"` + ghost `IconButton`s). Authored in the
// dark-scheme hex palette; theme.ts maps each hex to a DS token per scheme (see package CLAUDE.md).
export const composerSuggestionStyles = createThemedStyles({
  row: {
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: 8,
    maxWidth: 900,
    width: '100%',
  },
  scroll: { flexGrow: 0, flexShrink: 1 },
  scrollContent: { alignItems: 'center', gap: 6, paddingRight: 6 },
  // DS `Chip skin="light"`, size md: borderless stone fill, full-radius pill, h-7 / px-2 / gap-1.
  chip: {
    alignItems: 'center',
    backgroundColor: '#505050', // → chipFill (DS chips-fill); the light skin carries no border
    borderRadius: 999,
    flexDirection: 'row',
    gap: 4,
    height: 28,
    paddingHorizontal: 8,
  },
  chipIcon: { alignItems: 'center', justifyContent: 'center' },
  chipText: { color: '#F4F4F5', fontSize: 14, fontWeight: '500', maxWidth: 240 },
  actions: { alignItems: 'center', flexDirection: 'row', gap: 4, marginLeft: 4 },
  // Refresh / dismiss: DS ghost `IconButton` (size tiny) — borderless, no fill box.
  actionButton: {
    alignItems: 'center',
    borderRadius: 999,
    height: 28,
    justifyContent: 'center',
    width: 28,
  },
  actionButtonDisabled: { opacity: 0.4 },
  restoreRow: { alignItems: 'flex-end', marginBottom: 8, maxWidth: 900, width: '100%' },
  // The collapsed restore affordance keeps the bordered box — the web DS branch keeps
  // actionBtnClass here and only swaps the icon to sparkles.
  restoreButton: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    height: 28,
    justifyContent: 'center',
    width: 28,
  },
  skeleton: { backgroundColor: '#1F1F23', borderRadius: 8, height: 28 },
});