Email

1"use client";
2import { Badge } from "@/components/ui/badge";
3import { Tick01Icon, CancelCircleIcon } from "@hugeicons/core-free-icons";
4import { HugeiconsIcon } from "@hugeicons/react";
5import React from "react";
6interface EmailProps {
7  icon?: React.ReactNode;
8  status?: "complete" | "incomplete";
9  title: string;
10  to: string;
11  subject: string;
12  sentAt: string | Date;
13  body: string;
14  sender?: string;
15}
16const STATUS_MAP = {
17  complete: {
18    color: "#43A047",
19    icon: (
20      <HugeiconsIcon
21        icon={Tick01Icon}
22        strokeWidth={1}
23        size={18}
24        className="text-[#43A047]"
25      />
26    ),
27    text: "Completed",
28  },
29  incomplete: {
30    color: "#e53935",
31    icon: (
32      <HugeiconsIcon
33        icon={CancelCircleIcon}
34        strokeWidth={1}
35        size={20}
36        className="text-[#e53935]"
37      />
38    ),
39    text: "Incomplete",
40  },
41} as const;
42 
43const Email: React.FC<EmailProps> = ({
44  icon,
45  status,
46  title,
47  to,
48  subject,
49  sentAt,
50  body,
51  sender,
52}) => {
53  const statusKey = status?.toLowerCase() as keyof typeof STATUS_MAP;
54  const {
55    color,
56    icon: statusIcon,
57    text,
58  } = STATUS_MAP[statusKey] ?? STATUS_MAP.incomplete;
59  return (
60    <div className="rounded-xl border bg-card text-card-foreground shadow p-6 w-full max-w-2xl">
61      <div className="flex w-full items-center justify-between mb-3">
62        <div className="flex items-center space-x-2">
63          {statusIcon}
64          {icon}
65          <span className="font-semibold">
66            Email Sent : <span className="text-muted-foreground">{title}</span>
67          </span>
68        </div>
69        <Badge style={{ backgroundColor: `${color}20`, color }}>{text}</Badge>
70      </div>
71 
72      <div className="text-md space-y-4 border-t pt-2">
73        <div>
74          <span className="font-semibold text-muted-foreground">To: </span>
75          <span className="font-semibold">{to}</span>
76        </div>
77        <hr />
78        <div>
79          <span className="font-semibold text-muted-foreground">Subject: </span>
80          {subject}
81        </div>
82        <hr />
83        <div>
84          <span className="font-semibold text-muted-foreground">Sent: </span>
85          {typeof sentAt === "string" ? sentAt : sentAt.toLocaleString()}
86        </div>
87        <hr />
88      </div>
89 
90      <div className="mt-4 text-md whitespace-pre-line">
91        {body}
92        {sender && <p className="mt-4 font-medium">{sender}</p>}
93      </div>
94    </div>
95  );
96};
97 
98export default Email;