'use client';
import AppButton from '@/components/ui/button';
import AppTag from '@/components/ui/tag';
import AppTypography from '@/components/ui/typography';
import { Card } from 'antd';
import { Link } from 'lucide-react';
import React from 'react';

const WebhookItem = ({ item }: { item: any }) => {
  return (
    <Card
      title={item?.name}
      extra={
        <div className="flex items-center space-x-2">
          <AppButton>Edit</AppButton>
          <AppButton type="primary" danger>
            Delete
          </AppButton>
        </div>
      }
      className="!mb-4"
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2  w-[300px] text-ellipsis overflow-hidden text-nowrap">
          <Link size={18} />
          <AppTypography>{item?.url}</AppTypography>
        </div>
        <div className="w-[100px] text-start">
          <AppTag
            color={item?.status === 'ACTIVE' ? '#0E9154' : 'orange-inverse'}
          >
            {item?.status}
          </AppTag>
        </div>
        <div className="w-[200px] text-start">
          <AppTypography>
            {new Date(item?.createdTime).toLocaleString()}
          </AppTypography>
        </div>
      </div>
    </Card>
  );
};

export default WebhookItem;