"use client"

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Input } from '@/components/ui/input'
import { Progress } from '@/components/ui/progress'
import { 
  MessageCircle, 
  Send, 
  Paperclip,
  Smile,
  Play,
  Pause,
  Volume2,
  Download,
  ShoppingCart,
  Plus,
  Minus,
  Trash2,
  Star,
  Heart,
  Package,
  Building,
  Users,
  Phone,
  Mail,
  MapPin,
  FileText,
  Image as ImageIcon,
  Mic,
  MoreVertical,
  Search,
  Filter,
  Eye,
  Calendar,
  Clock,
  CheckCircle,
  AlertCircle,
  XCircle
} from 'lucide-react'

export function SpecializedDemo() {
  const [cartQuantity, setCartQuantity] = useState(2)
  const [isFavorite, setIsFavorite] = useState(false)
  const [isPlaying, setIsPlaying] = useState(false)

  return (
    <div className="space-y-6">
      {/* Мессенджер компоненты */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Компоненты мессенджера</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Chat Interface */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Интерфейс чата</h4>
            <div className="glass-card rounded-lg border border-white/10 h-80 flex">
              {/* Chat List */}
              <div className="w-80 border-r border-white/10 p-4 space-y-3">
                <div className="flex items-center space-x-2 mb-4">
                  <Users className="h-5 w-5 text-blue-400" />
                  <div>
                    <h5 className="text-white font-medium">Контрагенты</h5>
                    <p className="text-white/60 text-sm">4 активных</p>
                  </div>
                </div>
                
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/40" />
                  <Input placeholder="Поиск..." className="pl-10 glass-input text-white" />
                </div>

                <div className="space-y-2">
                  <div className="glass-card p-3 rounded-lg border border-primary/30 bg-primary/10">
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10 bg-blue-500/30">
                        <AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <span className="text-white font-medium text-sm">ЛогКом ООО</span>
                          <Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
                        </div>
                        <p className="text-white/60 text-xs">Последнее сообщение...</p>
                      </div>
                    </div>
                  </div>

                  <div className="glass-card p-3 rounded-lg border border-white/10">
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10 bg-green-500/30">
                        <AvatarFallback className="bg-green-500/30 text-white">СМ</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <span className="text-white font-medium text-sm">СеллерМакс</span>
                          <Badge className="bg-green-500/20 text-green-300 text-xs">Селлер</Badge>
                        </div>
                        <p className="text-white/60 text-xs">Когда будет поставка?</p>
                      </div>
                    </div>
                  </div>

                  <div className="glass-card p-3 rounded-lg border border-white/10">
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10 bg-purple-500/30">
                        <AvatarFallback className="bg-purple-500/30 text-white">ОТ</AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <div className="flex items-center space-x-2">
                          <span className="text-white font-medium text-sm">ОптТорг</span>
                          <Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
                        </div>
                        <p className="text-white/60 text-xs">Новый прайс готов</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Chat Window */}
              <div className="flex-1 flex flex-col">
                {/* Chat Header */}
                <div className="p-4 border-b border-white/10">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <Avatar className="h-10 w-10 bg-blue-500/30">
                        <AvatarFallback className="bg-blue-500/30 text-white">ЛК</AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="flex items-center space-x-2">
                          <span className="text-white font-medium">ЛогКом ООО</span>
                          <Badge className="bg-orange-500/20 text-orange-300 text-xs">Логистика</Badge>
                        </div>
                        <p className="text-white/60 text-sm">Логистическая компания</p>
                      </div>
                    </div>
                    <Button variant="ghost" size="icon">
                      <MoreVertical className="h-4 w-4 text-white/60" />
                    </Button>
                  </div>
                </div>

                {/* Messages */}
                <div className="flex-1 p-4 space-y-4 overflow-y-auto">
                  {/* Incoming Message */}
                  <div className="flex">
                    <div className="max-w-xs">
                      <div className="bg-white/10 border border-white/20 rounded-lg p-3">
                        <p className="text-white text-sm">Привет! Как дела с доставкой?</p>
                      </div>
                      <p className="text-white/50 text-xs mt-1">10:30</p>
                    </div>
                  </div>

                  {/* Outgoing Message */}
                  <div className="flex justify-end">
                    <div className="max-w-xs">
                      <div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
                        <p className="text-white text-sm">Все отлично! Груз уже в пути</p>
                      </div>
                      <p className="text-blue-300/70 text-xs mt-1 text-right">10:32</p>
                    </div>
                  </div>

                  {/* Voice Message */}
                  <div className="flex">
                    <div className="max-w-xs">
                      <div className="bg-white/10 border border-white/20 rounded-lg p-3">
                        <div className="flex items-center space-x-3">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setIsPlaying(!isPlaying)}
                            className="text-white hover:bg-white/20"
                          >
                            {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                          </Button>
                          <div className="flex-1">
                            <div className="flex items-center space-x-2">
                              <Volume2 className="h-3 w-3 text-white/60" />
                              <div className="flex-1 h-1 bg-white/20 rounded-full">
                                <div className="h-full w-1/3 bg-white/60 rounded-full"></div>
                              </div>
                            </div>
                            <div className="flex justify-between text-xs text-white/50 mt-1">
                              <span>0:08</span>
                              <span>0:24</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <p className="text-white/50 text-xs mt-1">10:35</p>
                    </div>
                  </div>

                  {/* File Message */}
                  <div className="flex justify-end">
                    <div className="max-w-xs">
                      <div className="bg-blue-500/20 border border-blue-500/30 rounded-lg p-3">
                        <div className="flex items-center space-x-3">
                          <div className="w-10 h-10 bg-blue-500/30 rounded-lg flex items-center justify-center">
                            <FileText className="h-5 w-5 text-white" />
                          </div>
                          <div className="flex-1">
                            <p className="text-white font-medium text-sm">договор.pdf</p>
                            <p className="text-blue-300/70 text-xs">2.4 MB • PDF</p>
                          </div>
                          <Button variant="ghost" size="icon" className="text-blue-300">
                            <Download className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                      <p className="text-blue-300/70 text-xs mt-1 text-right">10:38</p>
                    </div>
                  </div>
                </div>

                {/* Message Input */}
                <div className="p-4 border-t border-white/10">
                  <div className="flex items-center space-x-2">
                    <div className="flex-1">
                      <Input 
                        placeholder="Введите сообщение..."
                        className="glass-input text-white"
                      />
                    </div>
                    <Button variant="ghost" size="icon" className="text-white/60">
                      <Smile className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon" className="text-white/60">
                      <Paperclip className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon" className="text-white/60">
                      <Mic className="h-4 w-4" />
                    </Button>
                    <Button variant="glass" size="icon">
                      <Send className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Корзина и товары */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Компоненты корзины и товаров</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Product Card */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Карточка товара</h4>
            <div className="w-64 glass-card rounded-lg border border-white/10 overflow-hidden">
              {/* Product Image */}
              <div className="relative h-40 bg-white/5">
                <div className="absolute inset-0 flex items-center justify-center">
                  <Package className="h-16 w-16 text-white/30" />
                </div>
                <div className="absolute top-2 left-2">
                  <Badge className="bg-green-500/20 text-green-300 text-xs">В наличии</Badge>
                </div>
                <div className="absolute top-2 right-2">
                  <Button 
                    variant="ghost" 
                    size="icon"
                    onClick={() => setIsFavorite(!isFavorite)}
                    className="w-8 h-8 bg-black/50 hover:bg-black/70"
                  >
                    <Heart className={`h-4 w-4 ${isFavorite ? 'text-red-400 fill-current' : 'text-white/60'}`} />
                  </Button>
                </div>
              </div>

              {/* Product Info */}
              <div className="p-4 space-y-3">
                <div>
                  <h5 className="text-white font-medium text-sm mb-1">iPhone 15 Pro Max</h5>
                  <p className="text-white/60 text-xs">Артикул: IP15PM-256-BLU</p>
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-white font-semibold">89 990 ₽</div>
                    <div className="text-white/60 text-xs">В наличии: 15 шт</div>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Star className="h-3 w-3 text-yellow-400 fill-current" />
                    <Star className="h-3 w-3 text-yellow-400 fill-current" />
                    <Star className="h-3 w-3 text-yellow-400 fill-current" />
                    <Star className="h-3 w-3 text-yellow-400 fill-current" />
                    <Star className="h-3 w-3 text-white/30" />
                  </div>
                </div>

                <div className="flex items-center space-x-2">
                  <div className="flex items-center space-x-1 glass-input rounded px-2 py-1">
                    <Button 
                      variant="ghost" 
                      size="icon"
                      onClick={() => setCartQuantity(Math.max(1, cartQuantity - 1))}
                      className="w-6 h-6 p-0"
                    >
                      <Minus className="h-3 w-3" />
                    </Button>
                    <span className="text-white text-sm w-8 text-center">{cartQuantity}</span>
                    <Button 
                      variant="ghost" 
                      size="icon"
                      onClick={() => setCartQuantity(cartQuantity + 1)}
                      className="w-6 h-6 p-0"
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </div>
                  <Button variant="glass" className="flex-1 h-8 text-xs">
                    <ShoppingCart className="h-3 w-3 mr-2" />
                    В корзину
                  </Button>
                </div>

                {/* Organization */}
                <div className="flex items-center space-x-2 pt-2 border-t border-white/10">
                  <Avatar className="h-6 w-6 bg-purple-500/30">
                    <AvatarFallback className="bg-purple-500/30 text-white text-xs">ОТ</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white text-xs font-medium">ОптТорг</div>
                    <Badge className="bg-purple-500/20 text-purple-300 text-xs">Оптовик</Badge>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Cart Summary */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Корзина (сводка)</h4>
            <div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
              <div className="flex items-center space-x-3">
                <ShoppingCart className="h-5 w-5 text-purple-400" />
                <div>
                  <h5 className="text-white font-medium">Корзина</h5>
                  <p className="text-white/60 text-sm">3 товара</p>
                </div>
              </div>

              {/* Cart Items */}
              <div className="space-y-3">
                <div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
                  <div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
                    <Package className="h-6 w-6 text-white/30" />
                  </div>
                  <div className="flex-1">
                    <div className="text-white text-sm font-medium">iPhone 15 Pro</div>
                    <div className="text-white/60 text-xs">2 × 89 990 ₽</div>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Button variant="ghost" size="icon" className="w-6 h-6">
                      <Minus className="h-3 w-3 text-white/60" />
                    </Button>
                    <span className="text-white text-sm w-6 text-center">2</span>
                    <Button variant="ghost" size="icon" className="w-6 h-6">
                      <Plus className="h-3 w-3 text-white/60" />
                    </Button>
                    <Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                </div>

                <div className="flex items-center space-x-3 glass-card p-3 rounded border border-white/10">
                  <div className="w-12 h-12 bg-white/5 rounded flex items-center justify-center">
                    <Package className="h-6 w-6 text-white/30" />
                  </div>
                  <div className="flex-1">
                    <div className="text-white text-sm font-medium">Samsung Galaxy</div>
                    <div className="text-white/60 text-xs">1 × 75 990 ₽</div>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Button variant="ghost" size="icon" className="w-6 h-6">
                      <Minus className="h-3 w-3 text-white/60" />
                    </Button>
                    <span className="text-white text-sm w-6 text-center">1</span>
                    <Button variant="ghost" size="icon" className="w-6 h-6">
                      <Plus className="h-3 w-3 text-white/60" />
                    </Button>
                    <Button variant="ghost" size="icon" className="w-6 h-6 text-red-400">
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Summary */}
              <div className="border-t border-white/10 pt-4 space-y-2">
                <div className="flex justify-between text-white/60 text-sm">
                  <span>Товары (3 шт)</span>
                  <span>255 970 ₽</span>
                </div>
                <div className="flex justify-between text-white/60 text-sm">
                  <span>Доставка</span>
                  <span>Бесплатно</span>
                </div>
                <div className="flex justify-between text-white font-semibold">
                  <span>Итого</span>
                  <span>255 970 ₽</span>
                </div>
              </div>

              <Button variant="glass" className="w-full">
                Оформить заказ
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Компоненты организаций */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Компоненты организаций</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Organization Card */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Карточка организации</h4>
            <div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
              <div className="flex items-start space-x-3">
                <Avatar className="h-12 w-12 bg-blue-500/30">
                  <AvatarFallback className="bg-blue-500/30 text-white">ФЦ</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-1">
                    <h5 className="text-white font-medium">ФулфилментЦентр ООО</h5>
                    <Badge className="bg-blue-500/20 text-blue-300 text-xs">Фулфилмент</Badge>
                  </div>
                  <p className="text-white/60 text-sm">Полный цикл обработки заказов</p>
                </div>
              </div>

              <div className="space-y-2 text-sm">
                <div className="flex items-center space-x-2 text-white/70">
                  <Building className="h-4 w-4 text-white/40" />
                  <span>ИНН: 7707083893</span>
                </div>
                <div className="flex items-center space-x-2 text-white/70">
                  <MapPin className="h-4 w-4 text-white/40" />
                  <span>Москва, ул. Складская, 15</span>
                </div>
                <div className="flex items-center space-x-2 text-white/70">
                  <Phone className="h-4 w-4 text-white/40" />
                  <span>+7 (495) 123-45-67</span>
                </div>
                <div className="flex items-center space-x-2 text-white/70">
                  <Mail className="h-4 w-4 text-white/40" />
                  <span>info@fulfilment.ru</span>
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2 border-t border-white/10">
                <Button variant="glass" className="flex-1 h-8 text-xs">
                  Добавить в контрагенты
                </Button>
                <Button variant="outline" size="icon" className="h-8 w-8">
                  <Eye className="h-3 w-3" />
                </Button>
              </div>
            </div>
          </div>

          {/* User Profile */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Профиль пользователя</h4>
            <div className="w-80 glass-card rounded-lg border border-white/10 p-4 space-y-4">
              <div className="flex items-center space-x-4">
                <Avatar className="h-16 w-16 bg-primary/30">
                  <AvatarFallback className="bg-primary/30 text-white text-xl">ИИ</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <h5 className="text-white font-medium">Иван Иванов</h5>
                  <p className="text-white/60 text-sm">Менеджер</p>
                  <Badge className="bg-blue-500/20 text-blue-300 text-xs mt-1">Фулфилмент</Badge>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4 text-sm">
                <div className="space-y-1">
                  <p className="text-white/60">Телефон</p>
                  <p className="text-white">+7 (999) 123-45-67</p>
                </div>
                <div className="space-y-1">
                  <p className="text-white/60">Email</p>
                  <p className="text-white">ivan@company.ru</p>
                </div>
                <div className="space-y-1">
                  <p className="text-white/60">Telegram</p>
                  <p className="text-white">@ivan_manager</p>
                </div>
                <div className="space-y-1">
                  <p className="text-white/60">WhatsApp</p>
                  <p className="text-white">+7 (999) 123-45-67</p>
                </div>
              </div>

              <div className="flex items-center space-x-2 pt-2 border-t border-white/10">
                <Button variant="glass" className="flex-1 h-8 text-xs">
                  <MessageCircle className="h-3 w-3 mr-2" />
                  Написать
                </Button>
                <Button variant="outline" className="flex-1 h-8 text-xs">
                  <Phone className="h-3 w-3 mr-2" />
                  Позвонить
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Состояния и индикаторы */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Состояния и индикаторы</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Status Indicators */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Индикаторы состояния</h4>
            <div className="grid grid-cols-2 gap-4">
              <div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-400" />
                  <div>
                    <div className="text-white font-medium text-sm">Успешно</div>
                    <div className="text-green-300/70 text-xs">Операция завершена</div>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <AlertCircle className="h-5 w-5 text-yellow-400" />
                  <div>
                    <div className="text-white font-medium text-sm">Предупреждение</div>
                    <div className="text-yellow-300/70 text-xs">Требует внимания</div>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <XCircle className="h-5 w-5 text-red-400" />
                  <div>
                    <div className="text-white font-medium text-sm">Ошибка</div>
                    <div className="text-red-300/70 text-xs">Операция не выполнена</div>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <Clock className="h-5 w-5 text-blue-400" />
                  <div>
                    <div className="text-white font-medium text-sm">В обработке</div>
                    <div className="text-blue-300/70 text-xs">Пожалуйста, подождите</div>
                  </div>
                </div>
              </div>

              <div className="glass-card p-4 rounded-lg border border-white/10 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-white text-sm">Загрузка данных</span>
                  <div className="w-4 h-4 border-2 border-white/20 border-t-white animate-spin rounded-full"></div>
                </div>
                
                <div>
                  <div className="flex items-center justify-between text-sm mb-2">
                    <span className="text-white">Прогресс выполнения</span>
                    <span className="text-white/60">75%</span>
                  </div>
                  <Progress value={75} className="h-2" />
                </div>
                
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                  <span className="text-white text-sm">Онлайн</span>
                </div>
                
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-red-400 rounded-full"></div>
                  <span className="text-white text-sm">Оффлайн</span>
                </div>
                
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
                  <span className="text-white text-sm">Ожидание</span>
                </div>
              </div>
            </div>
          </div>

          {/* Activity Timeline */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Временная шкала активности</h4>
            <div className="glass-card p-4 rounded-lg border border-white/10">
              <div className="space-y-4">
                <div className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-green-400 rounded-full mt-2"></div>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <span className="text-white text-sm font-medium">Заказ создан</span>
                      <Badge className="bg-green-500/20 text-green-300 text-xs">Завершено</Badge>
                    </div>
                    <p className="text-white/60 text-xs">Заказ #12345 успешно создан</p>
                    <p className="text-white/40 text-xs">2 минуты назад</p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 animate-pulse"></div>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <span className="text-white text-sm font-medium">Обработка платежа</span>
                      <Badge className="bg-blue-500/20 text-blue-300 text-xs">В процессе</Badge>
                    </div>
                    <p className="text-white/60 text-xs">Проверка платежных данных</p>
                    <p className="text-white/40 text-xs">Сейчас</p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <span className="text-white/60 text-sm">Отправка товара</span>
                      <Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
                    </div>
                    <p className="text-white/40 text-xs">Подготовка к отправке</p>
                  </div>
                </div>
                
                <div className="flex items-start space-x-3">
                  <div className="w-2 h-2 bg-white/20 rounded-full mt-2"></div>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <span className="text-white/60 text-sm">Доставка</span>
                      <Badge variant="outline" className="border-white/20 text-white/60 text-xs">Ожидание</Badge>
                    </div>
                    <p className="text-white/40 text-xs">Передача курьеру</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}