feat: create HighlightsTab component with color picker

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/bible/highlights-tab.tsx

@@ -0,0 +1,90 @@
+'use client'
+import { Box, Button, Grid, Typography, Divider } from '@mui/material'
+import { BibleVerse, HighlightColor } from '@/types'
+
+const HIGHLIGHT_COLORS: HighlightColor[] = ['yellow', 'orange', 'pink', 'blue']
+
+const COLOR_MAP: Record<HighlightColor, { bg: string; hex: string }> = {
+  yellow: { bg: 'rgba(255, 193, 7, 0.3)', hex: '#FFC107' },
+  orange: { bg: 'rgba(255, 152, 0, 0.3)', hex: '#FF9800' },
+  pink: { bg: 'rgba(233, 30, 99, 0.3)', hex: '#E91E63' },
+  blue: { bg: 'rgba(33, 150, 243, 0.3)', hex: '#2196F3' }
+}
+
+interface HighlightsTabProps {
+  verse: BibleVerse | null
+  isHighlighted: boolean
+  currentColor: HighlightColor | null
+  onToggleHighlight: () => void
+  onColorChange: (color: HighlightColor) => void
+}
+
+export function HighlightsTab({
+  verse,
+  isHighlighted,
+  currentColor,
+  onToggleHighlight,
+  onColorChange
+}: HighlightsTabProps) {
+  if (!verse) return null
+
+  return (
+    <Box sx={{ p: 2 }}>
+      {!isHighlighted ? (
+        <Button
+          fullWidth
+          variant="contained"
+          color="primary"
+          onClick={onToggleHighlight}
+        >
+          Highlight this verse
+        </Button>
+      ) : (
+        <>
+          <Button
+            fullWidth
+            variant="outlined"
+            color="error"
+            onClick={onToggleHighlight}
+            sx={{ mb: 2 }}
+          >
+            Remove highlight
+          </Button>
+
+          <Typography variant="subtitle2" sx={{ mb: 1 }}>
+            Highlight Color
+          </Typography>
+
+          <Grid container spacing={1} sx={{ mb: 2 }}>
+            {HIGHLIGHT_COLORS.map((color) => (
+              <Grid item xs={3} key={color}>
+                <Button
+                  data-testid={`color-${color}`}
+                  fullWidth
+                  variant={currentColor === color ? 'contained' : 'outlined'}
+                  onClick={() => onColorChange(color)}
+                  sx={{
+                    bgcolor: COLOR_MAP[color].bg,
+                    borderColor: COLOR_MAP[color].hex,
+                    border: currentColor === color ? `2px solid ${COLOR_MAP[color].hex}` : undefined,
+                    minHeight: 50,
+                    textTransform: 'capitalize',
+                    color: currentColor === color ? '#000' : 'inherit'
+                  }}
+                >
+                  {color}
+                </Button>
+              </Grid>
+            ))}
+          </Grid>
+
+          <Divider sx={{ my: 2 }} />
+
+          <Typography variant="body2" color="textSecondary">
+            You can highlight the same verse multiple times with different colors.
+          </Typography>
+        </>
+      )}
+    </Box>
+  )
+}