/**
 * Help Time Blocks - Comprehensive guide for time blocking features
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  CalendarOff,
  Building2,
  User,
  Clock,
  CalendarDays,
  Ban,
  AlertCircle,
  CheckCircle,
  Info,
  Repeat,
  ChevronRight,
  BookOpen,
  Lightbulb,
  AlertTriangle,
  Eye,
} from 'lucide-react';

const HelpTimeBlocks: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Back Button */}
      <button
        onClick={() => navigate(-1)}
        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
      >
        <ArrowLeft size={20} />
        {t('common.back', 'Back')}
      </button>

      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
            <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
              {t('helpTimeBlocks.title', 'Time Blocks Guide')}
            </h1>
            <p className="text-gray-500 dark:text-gray-400">
              {t('helpTimeBlocks.subtitle', 'Learn how to block off time for closures, holidays, and unavailability')}
            </p>
          </div>
        </div>
      </div>

      {/* Overview Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <CalendarOff size={20} className="text-brand-500" />
          {t('helpTimeBlocks.overview.title', 'What are Time Blocks?')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Time blocks allow you to mark specific dates, times, or recurring periods as unavailable for bookings.
            Use them to manage holidays, business closures, staff vacations, maintenance windows, and more.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Building2 size={20} className="text-blue-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Business Blocks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Apply to all resources. Perfect for company holidays, office closures, and maintenance.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <User size={20} className="text-green-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Resource Blocks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Apply to specific resources. Use for individual vacations, appointments, or training.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Ban size={20} className="text-red-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Hard Blocks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Completely prevent bookings during the blocked period. Cannot be overridden.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <AlertCircle size={20} className="text-yellow-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Soft Blocks</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Show a warning but still allow bookings with confirmation.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Block Levels Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Building2 size={20} className="text-brand-500" />
          {t('helpTimeBlocks.levels.title', 'Block Levels')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-700/50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Level</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Scope</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Example Uses</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="flex items-center gap-2">
                    <Building2 size={16} className="text-blue-500" />
                    <span className="font-medium text-gray-900 dark:text-white">Business</span>
                  </div>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  All resources in your business
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Holidays, office closures, company events, maintenance
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="flex items-center gap-2">
                    <User size={16} className="text-green-500" />
                    <span className="font-medium text-gray-900 dark:text-white">Resource</span>
                  </div>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  A specific resource (staff member, room, etc.)
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Vacation, personal appointments, lunch breaks, training
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
          <div className="flex items-start gap-3">
            <Info size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
            <div>
              <h4 className="font-medium text-blue-800 dark:text-blue-300">Blocks are Additive</h4>
              <p className="text-sm text-blue-700 dark:text-blue-400">
                Both business-level and resource-level blocks apply. If the business is closed on a holiday,
                individual resource blocks don't matter for that day.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Block Types Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Ban size={20} className="text-brand-500" />
          {t('helpTimeBlocks.types.title', 'Block Types: Hard vs Soft')}
        </h2>
        <div className="space-y-4">
          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                <Ban size={24} className="text-red-600 dark:text-red-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Hard Block</h3>
                <p className="text-gray-600 dark:text-gray-300 mb-3">
                  Completely prevents any bookings during the blocked period. Customers cannot book,
                  and staff cannot override. The scheduler shows a striped red overlay.
                </p>
                <div className="flex flex-wrap gap-2">
                  <span className="px-2 py-1 text-xs rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">Cannot be overridden</span>
                  <span className="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Shows in customer booking</span>
                  <span className="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Red striped overlay</span>
                </div>
              </div>
            </div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center flex-shrink-0">
                <AlertCircle size={24} className="text-yellow-600 dark:text-yellow-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Soft Block</h3>
                <p className="text-gray-600 dark:text-gray-300 mb-3">
                  Shows a warning but allows bookings with confirmation. Useful for indicating
                  preferred-off times that can be overridden if necessary.
                </p>
                <div className="flex flex-wrap gap-2">
                  <span className="px-2 py-1 text-xs rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300">Can be overridden</span>
                  <span className="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Shows warning only</span>
                  <span className="px-2 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Yellow dashed overlay</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Recurrence Patterns Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Repeat size={20} className="text-brand-500" />
          {t('helpTimeBlocks.recurrence.title', 'Recurrence Patterns')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50 dark:bg-gray-700/50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Pattern</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Description</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Example</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">One-time</span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  A specific date or date range that occurs once
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Dec 24-26 (Christmas break), Feb 15 (President's Day)
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">Weekly</span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  Repeats on specific days of the week
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Every Saturday and Sunday, Every Monday lunch
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">Monthly</span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  Repeats on specific days of the month
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  1st of every month (inventory), 15th (payroll)
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">Yearly</span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  Repeats on a specific month and day each year
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  July 4th, December 25th, January 1st
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs font-medium rounded bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300">Holiday</span>
                </td>
                <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
                  Select from popular US holidays. Multi-select supported - each holiday creates its own block.
                </td>
                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                  Christmas, Thanksgiving, Memorial Day, Independence Day
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      {/* Visualization Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Eye size={20} className="text-brand-500" />
          {t('helpTimeBlocks.visualization.title', 'Viewing Time Blocks')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-6">
            Time blocks appear in multiple views throughout the application with color-coded indicators:
          </p>

          {/* Color Legend */}
          <div className="mb-6 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <h4 className="font-medium text-gray-900 dark:text-white mb-3">Color Legend</h4>
            <div className="grid grid-cols-2 gap-3">
              <div className="flex items-center gap-2">
                <div className="w-6 h-4 rounded" style={{ background: 'repeating-linear-gradient(-45deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.3) 3px, rgba(239, 68, 68, 0.5) 3px, rgba(239, 68, 68, 0.5) 6px)' }}></div>
                <span className="text-sm text-gray-600 dark:text-gray-300">Business Hard Block</span>
                <span className="px-1.5 py-0.5 text-[10px] bg-red-500 text-white rounded font-semibold">B</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-6 h-4 rounded bg-yellow-200 dark:bg-yellow-900/50 border border-dashed border-yellow-500"></div>
                <span className="text-sm text-gray-600 dark:text-gray-300">Business Soft Block</span>
                <span className="px-1.5 py-0.5 text-[10px] bg-yellow-500 text-white rounded font-semibold">B</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-6 h-4 rounded" style={{ background: 'repeating-linear-gradient(-45deg, rgba(147, 51, 234, 0.25), rgba(147, 51, 234, 0.25) 3px, rgba(147, 51, 234, 0.4) 3px, rgba(147, 51, 234, 0.4) 6px)' }}></div>
                <span className="text-sm text-gray-600 dark:text-gray-300">Resource Hard Block</span>
                <span className="px-1.5 py-0.5 text-[10px] bg-purple-500 text-white rounded font-semibold">R</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-6 h-4 rounded bg-cyan-200 dark:bg-cyan-900/50 border border-dashed border-cyan-500"></div>
                <span className="text-sm text-gray-600 dark:text-gray-300">Resource Soft Block</span>
                <span className="px-1.5 py-0.5 text-[10px] bg-cyan-500 text-white rounded font-semibold">R</span>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CalendarDays size={20} className="text-brand-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Scheduler Overlay</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Blocked times appear directly on the scheduler calendar with visual indicators.
                  Business blocks use red/yellow colors, resource blocks use purple/cyan.
                  Click on any blocked area in week view to navigate to that day.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CalendarOff size={20} className="text-brand-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">Month View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Blocked dates show with colored backgrounds and badge indicators.
                  Multiple block types on the same day show all applicable badges.
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <Clock size={20} className="text-brand-500 mt-0.5" />
              <div>
                <h4 className="font-medium text-gray-900 dark:text-white">List View</h4>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Manage all time blocks in a tabular format with filtering options.
                  Edit, activate/deactivate, or delete blocks from here.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Staff Availability Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <User size={20} className="text-brand-500" />
          {t('helpTimeBlocks.staffAvailability.title', 'Staff Availability (My Availability)')}
        </h2>
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Staff members can manage their own time blocks through the "My Availability" page.
            This allows them to block off time for personal appointments, vacations, or other commitments.
          </p>
          <div className="space-y-3">
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={16} className="text-green-500" />
              <span className="text-sm text-gray-700 dark:text-gray-300">View business-level blocks (read-only)</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={16} className="text-green-500" />
              <span className="text-sm text-gray-700 dark:text-gray-300">Create and manage personal time blocks</span>
            </div>
            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <CheckCircle size={16} className="text-green-500" />
              <span className="text-sm text-gray-700 dark:text-gray-300">See yearly calendar of their availability</span>
            </div>
          </div>
          <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
            <div className="flex items-start gap-3">
              <AlertTriangle size={20} className="text-yellow-500 mt-0.5 flex-shrink-0" />
              <div>
                <h4 className="font-medium text-yellow-800 dark:text-yellow-300">Hard Block Permission</h4>
                <p className="text-sm text-yellow-700 dark:text-yellow-400">
                  By default, staff can only create soft blocks. To allow a staff member to create hard blocks,
                  enable the "Can create hard blocks" permission in their staff settings.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Best Practices Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Lightbulb size={20} className="text-brand-500" />
          {t('helpTimeBlocks.bestPractices.title', 'Best Practices')}
        </h2>
        <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
          <ul className="space-y-4">
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Plan holidays in advance</span>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  Set up annual holidays at the beginning of each year using the Holiday recurrence type.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Use soft blocks for preferences</span>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  Reserve hard blocks for absolute closures. Use soft blocks for preferred-off times that could be overridden.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Check for conflicts before creating</span>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  The system shows existing appointments that conflict with new blocks. Review before confirming.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Set recurrence end dates</span>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  For recurring blocks that aren't permanent, set an end date to prevent them from extending indefinitely.
                </p>
              </div>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
              <div>
                <span className="font-medium text-gray-900 dark:text-white">Use descriptive titles</span>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  Include clear titles like "Christmas Day", "Team Meeting", or "Annual Maintenance" for easy identification.
                </p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      {/* Quick Access Section */}
      <section className="mb-10">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
          {t('helpTimeBlocks.quickAccess.title', 'Quick Access')}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <a
            href="/time-blocks"
            className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
          >
            <div className="flex items-center gap-3">
              <Building2 size={20} className="text-brand-500" />
              <span className="font-medium text-gray-900 dark:text-white">Manage Time Blocks</span>
            </div>
            <ChevronRight size={16} className="text-gray-400" />
          </a>
          <a
            href="/my-availability"
            className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-brand-500 dark:hover:border-brand-500 transition-colors"
          >
            <div className="flex items-center gap-3">
              <User size={20} className="text-brand-500" />
              <span className="font-medium text-gray-900 dark:text-white">My Availability</span>
            </div>
            <ChevronRight size={16} className="text-gray-400" />
          </a>
        </div>
      </section>
    </div>
  );
};

export default HelpTimeBlocks;
