"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function MigrationGuide() {
  return (
    <Card className="mb-8">
      <CardHeader>
        <CardTitle>Icon Library Migration Guide: Lucide → Heroicons</CardTitle>
        <CardDescription>
          We've switched from Lucide React to Heroicons. Here's how to update your code.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <h3 className="text-lg font-medium mb-2">Import Changes</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2 text-red-500">Old (Lucide)</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`import { AlertCircle, Search, User } from 'lucide-react'`}</code>
              </pre>
            </div>
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2 text-green-500">New (Heroicons)</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`import { 
  ExclamationCircleIcon, 
  MagnifyingGlassIcon, 
  UserIcon 
} from "@heroicons/react/24/outline"`}</code>
              </pre>
            </div>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-medium mb-2">Usage Changes</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2 text-red-500">Old (Lucide)</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`<Search className="h-5 w-5" />`}</code>
              </pre>
            </div>
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2 text-green-500">New (Heroicons)</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`<MagnifyingGlassIcon className="h-5 w-5" />`}</code>
              </pre>
            </div>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-medium mb-2">Common Icon Name Mappings</h3>
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-border">
              <thead>
                <tr>
                  <th className="px-4 py-2 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                    Lucide
                  </th>
                  <th className="px-4 py-2 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                    Heroicons
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                <tr>
                  <td className="px-4 py-2 text-sm">AlertCircle</td>
                  <td className="px-4 py-2 text-sm">ExclamationCircleIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">AlertTriangle</td>
                  <td className="px-4 py-2 text-sm">ExclamationTriangleIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Search</td>
                  <td className="px-4 py-2 text-sm">MagnifyingGlassIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Settings</td>
                  <td className="px-4 py-2 text-sm">Cog6ToothIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Mail</td>
                  <td className="px-4 py-2 text-sm">EnvelopeIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">X</td>
                  <td className="px-4 py-2 text-sm">XMarkIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Info</td>
                  <td className="px-4 py-2 text-sm">InformationCircleIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Download</td>
                  <td className="px-4 py-2 text-sm">ArrowDownTrayIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">Upload</td>
                  <td className="px-4 py-2 text-sm">ArrowUpTrayIcon</td>
                </tr>
                <tr>
                  <td className="px-4 py-2 text-sm">ExternalLink</td>
                  <td className="px-4 py-2 text-sm">ArrowTopRightOnSquareIcon</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div>
          <h3 className="text-lg font-medium mb-2">Variants</h3>
          <p className="text-sm mb-4">
            Heroicons provides two main variants: Outline and Solid. We're primarily using the Outline variant.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2">Outline Icons</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`import { UserIcon } from "@heroicons/react/24/outline"`}</code>
              </pre>
            </div>
            <div className="p-4 bg-muted rounded-md">
              <h4 className="text-sm font-semibold mb-2">Solid Icons</h4>
              <pre className="text-xs overflow-x-auto">
                <code>{`import { UserIcon } from "@heroicons/react/24/solid"`}</code>
              </pre>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}