{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "email",
  "type": "registry:component",
  "title": "Email",
  "description": "Email sending component",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/chatcn/tool-call/email.tsx",
      "content": "\"use client\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tick01Icon, CancelCircleIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport React from \"react\";\ninterface EmailProps {\n  icon?: React.ReactNode;\n  status?: \"complete\" | \"incomplete\";\n  title: string;\n  to: string;\n  subject: string;\n  sentAt: string | Date;\n  body: string;\n  sender?: string;\n}\nconst STATUS_MAP = {\n  complete: {\n    color: \"#43A047\",\n    icon: (\n      <HugeiconsIcon\n        icon={Tick01Icon}\n        strokeWidth={1}\n        size={18}\n        className=\"text-[#43A047]\"\n      />\n    ),\n    text: \"Completed\",\n  },\n  incomplete: {\n    color: \"#e53935\",\n    icon: (\n      <HugeiconsIcon\n        icon={CancelCircleIcon}\n        strokeWidth={1}\n        size={20}\n        className=\"text-[#e53935]\"\n      />\n    ),\n    text: \"Incomplete\",\n  },\n} as const;\n\nconst Email: React.FC<EmailProps> = ({\n  icon,\n  status,\n  title,\n  to,\n  subject,\n  sentAt,\n  body,\n  sender,\n}) => {\n  const statusKey = status?.toLowerCase() as keyof typeof STATUS_MAP;\n  const {\n    color,\n    icon: statusIcon,\n    text,\n  } = STATUS_MAP[statusKey] ?? STATUS_MAP.incomplete;\n  return (\n    <div className=\"rounded-xl border bg-card text-card-foreground shadow p-6 w-full max-w-2xl\">\n      <div className=\"flex w-full items-center justify-between mb-3\">\n        <div className=\"flex items-center space-x-2\">\n          {statusIcon}\n          {icon}\n          <span className=\"font-semibold\">\n            Email Sent : <span className=\"text-muted-foreground\">{title}</span>\n          </span>\n        </div>\n        <Badge style={{ backgroundColor: `${color}20`, color }}>{text}</Badge>\n      </div>\n\n      <div className=\"text-md space-y-4 border-t pt-2\">\n        <div>\n          <span className=\"font-semibold text-muted-foreground\">To: </span>\n          <span className=\"font-semibold\">{to}</span>\n        </div>\n        <hr />\n        <div>\n          <span className=\"font-semibold text-muted-foreground\">Subject: </span>\n          {subject}\n        </div>\n        <hr />\n        <div>\n          <span className=\"font-semibold text-muted-foreground\">Sent: </span>\n          {typeof sentAt === \"string\" ? sentAt : sentAt.toLocaleString()}\n        </div>\n        <hr />\n      </div>\n\n      <div className=\"mt-4 text-md whitespace-pre-line\">\n        {body}\n        {sender && <p className=\"mt-4 font-medium\">{sender}</p>}\n      </div>\n    </div>\n  );\n};\n\nexport default Email;\n",
      "type": "registry:component"
    }
  ]
}