"use client"

import type React from "react"
import { useState } from "react"

import { type ComponentInstance, useEditorStore } from "@/lib/store"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Progress } from "@/components/ui/progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Calendar } from "@/components/ui/calendar"
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"
import {
  Carousel as UiCarousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Plus, Minus, User } from "lucide-react"
import { WireframeRenderer } from "./wireframe-renderer"

interface ComponentRendererProps {
  component: ComponentInstance
  onClick?: (e: React.MouseEvent) => void
  onMouseDown?: (e: React.MouseEvent) => void
}

export function ComponentRenderer({ component, onClick, onMouseDown }: ComponentRendererProps) {
  const { selectedComponent, updateComponent } = useEditorStore()
  const isSelected = selectedComponent?.id === component.id

  const [checkboxState, setCheckboxState] = useState(component.props.checked || false)
  const [switchState, setSwitchState] = useState(component.props.checked || false)
  const [radioValue, setRadioValue] = useState(component.props.value || "")
  const [progressValue, setProgressValue] = useState(component.props.value || 50)
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
    component.props.selectedDate ? new Date(component.props.selectedDate) : undefined,
  )
  const [tableData, setTableData] = useState(
    component.props.rows || [
      ["John", "john@example.com"],
      ["Jane", "jane@example.com"],
      ["kenil", "kenil@example.com"],
      ["kavya", "kavya@example.com"],
      ["raj", "raj@example.com"]
    ],
  )
  const [editingCell, setEditingCell] = useState<{ row: number; col: number } | null>(null)
  const [editValue, setEditValue] = useState("")
  const [cardTitle, setCardTitle] = useState(component.props.title || "Card Title")
  const [cardDescription, setCardDescription] = useState(component.props.description || "Card description")
  const [cardContent, setCardContent] = useState(component.props.content || "Card content goes here")
  const [editingCardField, setEditingCardField] = useState<string | null>(null)
  const [dataTableSortAsc, setDataTableSortAsc] = useState(true)
  const [dataTablePage, setDataTablePage] = useState(1)
  const [dataTableSelected, setDataTableSelected] = useState<number[]>([])
  const [tableSortAsc, setTableSortAsc] = useState(true)
  const [tablePage, setTablePage] = useState(1)
  const [tableSelected, setTableSelected] = useState<number[]>([])

  const renderComponent = () => {
    switch (component.type) {
      case "button":
        return (
          <Button
            variant={component.props.variant || "default"}
            onClick={(e) => {
              e.stopPropagation()
              window.alert(`${component.props.children || "Button"} was clicked`)
            }}
          >
            {component.props.children || "Button"}
          </Button>
        )

      case "input":
        return <Input placeholder={component.props.placeholder || "Enter text..."} className="w-full max-w-sm" />

      case "textarea":
        return <Textarea placeholder={component.props.placeholder || "Enter text..."} className="w-full max-w-sm" />

      case "card":
        return (
          <Card className="w-full max-w-sm">
            <CardHeader>
              <CardTitle>
                {editingCardField === "title" ? (
                  <Input
                    value={cardTitle}
                    onChange={(e) => setCardTitle(e.target.value)}
                    onBlur={() => {
                      setEditingCardField(null)
                      updateComponent(component.id, { props: { title: cardTitle } })
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        setEditingCardField(null)
                        updateComponent(component.id, { props: { title: cardTitle } })
                      }
                    }}
                    className="text-lg font-semibold"
                    autoFocus
                  />
                ) : (
                  <span
                    onClick={(e) => {
                      e.stopPropagation()
                      setEditingCardField("title")
                    }}
                    className="cursor-text hover:bg-muted/50 px-1 rounded"
                  >
                    {cardTitle}
                  </span>
                )}
              </CardTitle>
              <CardDescription>
                {editingCardField === "description" ? (
                  <Input
                    value={cardDescription}
                    onChange={(e) => setCardDescription(e.target.value)}
                    onBlur={() => {
                      setEditingCardField(null)
                      updateComponent(component.id, { props: { description: cardDescription } })
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        setEditingCardField(null)
                        updateComponent(component.id, { props: { description: cardDescription } })
                      }
                    }}
                    autoFocus
                  />
                ) : (
                  <span
                    onClick={(e) => {
                      e.stopPropagation()
                      setEditingCardField("description")
                    }}
                    className="cursor-text hover:bg-muted/50 px-1 rounded"
                  >
                    {cardDescription}
                  </span>
                )}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {editingCardField === "content" ? (
                <Textarea
                  value={cardContent}
                  onChange={(e) => setCardContent(e.target.value)}
                  onBlur={() => {
                    setEditingCardField(null)
                    updateComponent(component.id, { props: { content: cardContent } })
                  }}
                  autoFocus
                />
              ) : (
                <p
                  onClick={(e) => {
                    e.stopPropagation()
                    setEditingCardField("content")
                  }}
                  className="cursor-text hover:bg-muted/50 px-1 rounded"
                >
                  {cardContent}
                </p>
              )}
            </CardContent>
          </Card>
        )

      case "checkbox":
        return (
          <div className="flex items-center space-x-2">
            <Checkbox
              id={component.id}
              checked={checkboxState}
              onCheckedChange={(checked) => {
                setCheckboxState(!!checked)
                updateComponent(component.id, { props: { checked: !!checked } })
              }}
            />
            <Label htmlFor={component.id}>{component.props.label || "Checkbox"}</Label>
          </div>
        )

      case "switch":
        return (
          <div className="flex items-center space-x-2">
            <Switch
              id={component.id}
              checked={switchState}
              onCheckedChange={(checked) => {
                setSwitchState(checked)
                updateComponent(component.id, { props: { checked } })
              }}
            />
            <Label htmlFor={component.id}>{component.props.label || "Switch"}</Label>
          </div>
        )

      case "select":
        return (
          <Select>
            <SelectTrigger className="w-full max-w-sm">
              <SelectValue placeholder={component.props.placeholder || "Select option..."} />
            </SelectTrigger>
            <SelectContent>
              {(component.props.options || ["Option 1", "Option 2"]).map((option: string, index: number) => (
                <SelectItem key={index} value={option.toLowerCase()}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )

      case "radiogroup":
        return (
          <RadioGroup
            value={radioValue}
            onValueChange={(value) => {
              setRadioValue(value)
              updateComponent(component.id, { props: { value } })
            }}
          >
            {(component.props.options || ["Option 1", "Option 2"]).map((option: string, index: number) => (
              <div key={index} className="flex items-center space-x-2">
                <RadioGroupItem value={option} id={`${component.id}-${index}`} />
                <Label htmlFor={`${component.id}-${index}`}>{option}</Label>
              </div>
            ))}
          </RadioGroup>
        )

      case "progress":
        return (
          <div className="w-full max-w-sm space-y-2">
            <Progress value={progressValue} className="w-full" />
            <div className="flex items-center justify-between">
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  const newValue = Math.max(0, progressValue - 10)
                  setProgressValue(newValue)
                  updateComponent(component.id, { props: { value: newValue } })
                }}
              >
                <Minus className="h-3 w-3" />
              </Button>
              <p className="text-sm text-muted-foreground">{progressValue}%</p>
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  const newValue = Math.min(100, progressValue + 10)
                  setProgressValue(newValue)
                  updateComponent(component.id, { props: { value: newValue } })
                }}
              >
                <Plus className="h-3 w-3" />
              </Button>
            </div>
          </div>
        )

      case "avatar":
        return (
          <Avatar>
            {component.props.src && <AvatarImage src={component.props.src || "/placeholder.svg"} alt="Avatar" />}
            <AvatarFallback>
              {component.props.fallback ? component.props.fallback : <User className="h-4 w-4" />}
            </AvatarFallback>
          </Avatar>
        )

      case "table": {
        const headers: string[] = component.props.headers || ["Name", "Email"]
        const pageSize: number = component.props.pageSize || 5
        const sortIndex: number = component.props.sortIndex ?? 0
        const sorted = [...tableData].sort((a, b) => {
          const va = a[sortIndex]?.toString().toLowerCase() ?? ""
          const vb = b[sortIndex]?.toString().toLowerCase() ?? ""
          const cmp = va.localeCompare(vb)
          return tableSortAsc ? cmp : -cmp
        })
        const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize))
        const page = Math.min(tablePage, totalPages)
        const start = (page - 1) * pageSize
        const pageRows = sorted.slice(start, start + pageSize)

        const toggleRow = (idx: number) => {
          setTableSelected((sel) => (sel.includes(idx) ? sel.filter((i) => i !== idx) : [...sel, idx]))
        }

        return (
          <div className="w-full max-w-md space-y-2">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[40px]">Sel</TableHead>
                  {headers.map((header: string, index: number) => (
                    <TableHead key={index}>
                      <button
                        className="underline"
                        onClick={(e) => {
                          e.stopPropagation()
                          if (sortIndex === index) setTableSortAsc(!tableSortAsc)
                          updateComponent(component.id, { props: { sortIndex: index } })
                        }}
                      >
                        {header}
                      </button>
                    </TableHead>
                  ))}
                  <TableHead className="w-[50px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pageRows.map((row: string[], rowIndex: number) => (
                  <TableRow key={start + rowIndex} className={tableSelected.includes(start + rowIndex) ? "bg-accent/20" : ""}>
                    <TableCell>
                      <Checkbox
                        id={`${component.id}-t-sel-${start + rowIndex}`}
                        checked={tableSelected.includes(start + rowIndex)}
                        onCheckedChange={() => toggleRow(start + rowIndex)}
                      />
                    </TableCell>
                    {row.map((cell: string, cellIndex: number) => (
                      <TableCell key={cellIndex}>
                        {editingCell?.row === start + rowIndex && editingCell?.col === cellIndex ? (
                          <Input
                            value={editValue}
                            onChange={(e) => setEditValue(e.target.value)}
                            onBlur={() => {
                              const newData = [...sorted]
                              newData[start + rowIndex][cellIndex] = editValue
                              // map back to original order not required for display; persist merged
                              const merged = [...tableData]
                              merged[start + rowIndex] = newData[start + rowIndex]
                              setTableData(merged)
                              updateComponent(component.id, { props: { rows: merged } })
                              setEditingCell(null)
                            }}
                            onKeyDown={(e) => {
                              if (e.key === "Enter") {
                                const newData = [...sorted]
                                newData[start + rowIndex][cellIndex] = editValue
                                const merged = [...tableData]
                                merged[start + rowIndex] = newData[start + rowIndex]
                                setTableData(merged)
                                updateComponent(component.id, { props: { rows: merged } })
                                setEditingCell(null)
                              }
                            }}
                            autoFocus
                            className="h-8"
                          />
                        ) : (
                          <span
                            onClick={(e) => {
                              e.stopPropagation()
                              setEditingCell({ row: start + rowIndex, col: cellIndex })
                              setEditValue(cell)
                            }}
                            className="cursor-text hover:bg-muted/50 px-1 rounded block min-h-[20px]"
                          >
                            {cell}
                          </span>
                        )}
                      </TableCell>
                    ))}
                    <TableCell>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={(e) => {
                          e.stopPropagation()
                          const merged = tableData.filter((_: string[], index: number) => index !== start + rowIndex)
                          setTableData(merged)
                          updateComponent(component.id, { props: { rows: merged } })
                        }}
                      >
                        <Minus className="h-3 w-3" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <div className="flex items-center justify-between">
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  setTablePage(Math.max(1, page - 1))
                }}
              >
                Previous
              </Button>
              <span className="text-xs text-muted-foreground">Page {page} / {totalPages}</span>
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  setTablePage(Math.min(totalPages, page + 1))
                }}
              >
                Next
              </Button>
            </div>
            <Button
              size="sm"
              variant="outline"
              onClick={(e) => {
                e.stopPropagation()
                const newRow = Array(tableData[0]?.length || headers.length || 2).fill("New")
                const newData = [...tableData, newRow]
                setTableData(newData)
                updateComponent(component.id, { props: { rows: newData } })
              }}
              className="w-full"
            >
              <Plus className="h-3 w-3 mr-1" />
              Add Row
            </Button>
          </div>
        )
      }

      case "data-table": {
        const headers: string[] = component.props.headers || ["Name", "Email"]
        const pageSize: number = component.props.pageSize || 5
        const sortIndex: number = component.props.sortIndex ?? 0
        const sorted = [...tableData].sort((a, b) => {
          const va = a[sortIndex]?.toString().toLowerCase() ?? ""
          const vb = b[sortIndex]?.toString().toLowerCase() ?? ""
          const cmp = va.localeCompare(vb)
          return dataTableSortAsc ? cmp : -cmp
        })
        const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize))
        const page = Math.min(dataTablePage, totalPages)
        const start = (page - 1) * pageSize
        const pageRows = sorted.slice(start, start + pageSize)

        const toggleRow = (idx: number) => {
          setDataTableSelected((sel) =>
            sel.includes(idx) ? sel.filter((i) => i !== idx) : [...sel, idx],
          )
        }

        return (
          <div className="w-full max-w-md space-y-2">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[40px]">Sel</TableHead>
                  {headers.map((header: string, index: number) => (
                    <TableHead key={index}>
                      <button
                        className="underline"
                        onClick={(e) => {
                          e.stopPropagation()
                          if (sortIndex === index) setDataTableSortAsc(!dataTableSortAsc)
                          updateComponent(component.id, { props: { sortIndex: index } })
                        }}
                      >
                        {header}
                      </button>
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {pageRows.map((row: string[], rowIndex: number) => (
                  <TableRow key={start + rowIndex} className={dataTableSelected.includes(start + rowIndex) ? "bg-accent/20" : ""}>
                    <TableCell>
                      <Checkbox
                        id={`${component.id}-sel-${start + rowIndex}`}
                        checked={dataTableSelected.includes(start + rowIndex)}
                        onCheckedChange={() => toggleRow(start + rowIndex)}
                      />
                    </TableCell>
                    {row.map((cell: string, cellIndex: number) => (
                      <TableCell key={cellIndex}>
                        {editingCell?.row === start + rowIndex && editingCell?.col === cellIndex ? (
                          <Input
                            value={editValue}
                            onChange={(e) => setEditValue(e.target.value)}
                            onBlur={() => {
                              const merged = [...tableData]
                              merged[start + rowIndex][cellIndex] = editValue
                              setTableData(merged)
                              updateComponent(component.id, { props: { rows: merged } })
                              setEditingCell(null)
                            }}
                            onKeyDown={(e) => {
                              if (e.key === "Enter") {
                                const merged = [...tableData]
                                merged[start + rowIndex][cellIndex] = editValue
                                setTableData(merged)
                                updateComponent(component.id, { props: { rows: merged } })
                                setEditingCell(null)
                              }
                            }}
                            autoFocus
                            className="h-8"
                          />
                        ) : (
                          <span
                            onClick={(e) => {
                              e.stopPropagation()
                              setEditingCell({ row: start + rowIndex, col: cellIndex })
                              setEditValue(cell)
                            }}
                            className="cursor-text hover:bg-muted/50 px-1 rounded block min-h-[20px]"
                          >
                            {cell}
                          </span>
                        )}
                      </TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Button
              size="sm"
              variant="outline"
              onClick={(e) => {
                e.stopPropagation()
                const newRow = Array(headers.length || 2).fill("New")
                const newData = [...tableData, newRow]
                setTableData(newData)
                updateComponent(component.id, { props: { rows: newData } })
              }}
              className="w-full"
            >
              <Plus className="h-3 w-3 mr-1" />
              Add Row
            </Button>
            <div className="flex items-center justify-between">
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  setDataTablePage(Math.max(1, page - 1))
                }}
              >
                Prev
              </Button>
              <span className="text-xs text-muted-foreground">
                Page {page} / {totalPages}
              </span>
              <Button
                size="sm"
                variant="outline"
                onClick={(e) => {
                  e.stopPropagation()
                  setDataTablePage(Math.min(totalPages, page + 1))
                }}
              >
                Next
              </Button>
            </div>
          </div>
        )
      }

      case "contextmenu":
        return (
          <ContextMenu>
            <ContextMenuTrigger asChild>
              <div className="w-[220px] h-[120px] bg-muted/30 flex items-center justify-center rounded">
                Right-click me
              </div>
            </ContextMenuTrigger>
            <ContextMenuContent className="w-64">
              <ContextMenuLabel>Quick Actions</ContextMenuLabel>
              <ContextMenuSeparator />
              <ContextMenuItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Copy</ContextMenuItem>
              <ContextMenuItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Paste</ContextMenuItem>
              <ContextMenuItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Delete</ContextMenuItem>
            </ContextMenuContent>
          </ContextMenu>
        )

      case "menubar":
        return (
          <Menubar>
            <MenubarMenu>
              <MenubarTrigger>File</MenubarTrigger>
              <MenubarContent>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>New</MenubarItem>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Open</MenubarItem>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Save</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
            <MenubarMenu>
              <MenubarTrigger>Edit</MenubarTrigger>
              <MenubarContent>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Cut</MenubarItem>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Copy</MenubarItem>
                <MenubarItem onClick={(e: React.MouseEvent) => e.stopPropagation()}>Paste</MenubarItem>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        )

      case "carousel":
        return (
          <div className="w-[260px]">
            <UiCarousel className="relative">
              <CarouselContent>
                {(["One", "Two", "Three"] as string[]).map((label, idx) => (
                  <CarouselItem key={idx} className="p-4">
                    <Card className="h-[120px] flex items-center justify-center">
                      <CardContent className="p-0">
                        <span className="text-sm text-muted-foreground">{label}</span>
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious />
              <CarouselNext />
            </UiCarousel>
          </div>
        )

      case "drawer":
        return (
          <Drawer>
            <DrawerTrigger asChild>
              <Button variant="outline">Open Drawer</Button>
            </DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>{component.props.title || "Drawer Title"}</DrawerTitle>
                <DrawerDescription>
                  {component.props.description || "This is a drawer. You can close it below."}
                </DrawerDescription>
              </DrawerHeader>
              <div className="p-4">
                <DrawerClose asChild>
                  <Button variant="secondary">Close</Button>
                </DrawerClose>
              </div>
            </DrawerContent>
          </Drawer>
        )

      case "tabs":
        return (
          <Tabs defaultValue="tab-0" className="w-full max-w-sm">
            <TabsList>
              {(component.props.tabs || [{ label: "Tab 1" }, { label: "Tab 2" }]).map((tab: any, index: number) => (
                <TabsTrigger key={index} value={`tab-${index}`}>
                  {tab.label}
                </TabsTrigger>
              ))}
            </TabsList>
            {(component.props.tabs || [{ content: "Content 1" }, { content: "Content 2" }]).map(
              (tab: any, index: number) => (
                <TabsContent key={index} value={`tab-${index}`}>
                  {tab.content || `Content ${index + 1}`}
                </TabsContent>
              ),
            )}
          </Tabs>
        )

        case "datepicker":
          return (
            <div
              className="w-[360px]"
              onMouseDown={(e) => e.stopPropagation()} // prevent dragging out of the component
              onClick={(e) => e.stopPropagation()} // prevent clicking out of the component
            >
              <Calendar
                mode="single"
                selected={selectedDate}
                onSelect={(date: Date | undefined) => {
                  setSelectedDate(date)
                  updateComponent(component.id, {
                    props: {
                      ...component.props,
                      selectedDate: date?.toISOString(),
                    },
                  })
                }}
                className="rounded-md border w-[360px] p-4 [--cell-size:2.4rem]"
              />
            </div>
          )

      case "dialog":
        return (
          <Dialog>
            <DialogTrigger asChild>
              <Button variant="outline">Open Dialog</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{component.props.title || "Dialog Title"}</DialogTitle>
                <DialogDescription>{component.props.description || "Dialog description"}</DialogDescription>
              </DialogHeader>
            </DialogContent>
          </Dialog>
        )

      // Wireframe components
      case "wireframe-svg":
      case "wireframe-rect":
      case "wireframe-circle":
      case "wireframe-text":
      case "wireframe-line":
      case "wireframe-path":
      case "wireframe-group":
        return (
          <WireframeRenderer
            component={component}
            onClick={onClick}
            onMouseDown={onMouseDown}
          />
        )

      default:
        return <div className="p-4 border border-dashed border-border rounded">Unknown Component</div>
    }
  }

  return (
    <div
      className={`absolute cursor-pointer transition-all ${
        isSelected ? "ring-2 ring-accent ring-offset-2" : "hover:ring-1 hover:ring-border"
      }`}
      style={{
        left: component.position.x,
        top: component.position.y,
      }}
      onClick={onClick}
      onMouseDown={onMouseDown}
    >
      {renderComponent()}
    </div>
  )
}