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

export const sharingPanelStyles = createThemedStyles({
  avatarImage: { height: '100%', width: '100%' },
  avatarWrap: {
    alignItems: 'center',
    backgroundColor: '#262626',
    borderRadius: 20,
    height: 40,
    justifyContent: 'center',
    overflow: 'hidden',
    width: 40,
  },
  badge: { color: '#DADADA', fontSize: 11, fontWeight: '800', marginLeft: 6 },
  creditNote: { alignItems: 'center', flexDirection: 'row', gap: 7, marginTop: 2 },
  creditNoteText: { color: '#8E8E93', flex: 1, fontSize: 12, lineHeight: 16 },
  disabledButton: { opacity: 0.62 },
  emptyText: { color: '#8E8E93', fontSize: 13, paddingVertical: 16, textAlign: 'center' },
  errorText: { color: '#FCA5A5', fontSize: 12, fontWeight: '700', marginTop: 8 },
  guestActions: { flexDirection: 'row', gap: 10, marginTop: 14 },
  guestBody: { color: '#DADADA', fontSize: 13, fontWeight: '700', lineHeight: 19, marginTop: 6 },
  guestCard: {
    backgroundColor: '#101010',
    borderColor: '#353535',
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 14,
    padding: 16,
  },
  guestHint: { color: '#F8D77B', fontSize: 12, fontWeight: '800', lineHeight: 17, marginTop: 8 },
  guestPrimaryButton: {
    alignItems: 'center',
    backgroundColor: '#F7F3E7',
    borderRadius: 8,
    flex: 1,
    flexDirection: 'row',
    gap: 7,
    justifyContent: 'center',
    paddingVertical: 10,
  },
  guestPrimaryButtonText: { color: '#111111', fontSize: 13, fontWeight: '900' },
  guestSecondaryButton: {
    alignItems: 'center',
    backgroundColor: '#1B1B1B',
    borderColor: '#333333',
    borderRadius: 8,
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row',
    gap: 7,
    justifyContent: 'center',
    paddingVertical: 10,
  },
  guestSecondaryButtonText: { color: '#F4F4F5', fontSize: 13, fontWeight: '900' },
  guestTitle: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
  input: {
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    color: '#F4F4F5',
    flex: 1,
    fontSize: 15,
    height: 48,
    paddingHorizontal: 12,
  },
  inviteButton: {
    alignItems: 'center',
    backgroundColor: '#1B1B1B',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    height: 48,
    justifyContent: 'center',
    paddingHorizontal: 18,
  },
  // Active (input has text): action-primary fill — black in light, white in dark.
  inviteButtonActive: { backgroundColor: '#F4F4F5', borderColor: '#F4F4F5' },
  inviteButtonText: { color: '#F4F4F5', fontSize: 14, fontWeight: '700' },
  inviteButtonTextActive: { color: '#111111' },
  inviteCard: {
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 14,
    padding: 16,
  },
  inviteRow: { alignItems: 'center', flexDirection: 'row', gap: 8 },
  memberEmail: { color: '#8E8E93', fontSize: 12, marginTop: 2 },
  memberName: { color: '#F4F4F5', flexShrink: 1, fontSize: 14, fontWeight: '800' },
  memberNameRow: { alignItems: 'center', flexDirection: 'row', minWidth: 0 },
  memberRow: { alignItems: 'center', flexDirection: 'row', paddingVertical: 9 },
  memberTextWrap: { flex: 1, marginLeft: 10, minWidth: 0 },
  membersList: { paddingBottom: 6, paddingHorizontal: 16, paddingTop: 4 },
  sectionTitleSpacing: { marginBottom: 3 },
  subtitle: { color: '#A1A1AA', fontSize: 13, lineHeight: 18, marginBottom: 12 },
  successText: { color: '#86EFAC', fontSize: 12, fontWeight: '800', marginTop: 8 },
});