import React, { useEffect, useState } from 'react';
import { Card, Avatar, Row, Col, Flex, Badge, Button, Tag } from 'antd';
import Icon, { CloseCircleOutlined, CloseCircleTwoTone, LoginOutlined, LogoutOutlined } from '@ant-design/icons';
import { LogIn, LogOut } from 'lucide-react';
import { useRouter } from 'next/navigation';

const { Meta } = Card;

export default function PresenceCardComponent({ presenceType, presenceUrl, presenceData }) {
    const router = useRouter();

    const handleClick = (type) => {
        if(type === 'Datang'){
            router.push('/check-in');
        } else {
            router.push('/check-out');
        }
    }

    // console.log(presenceData?.presence?.time)


  return (
    <div className='mt-4'>
        <div className='card bg-white'>
            <div>
                <Flex justify='flex-start' align='center' gap={'small'}>
                    <div className='max-w-sm'>
                        {!presenceUrl ?
                            presenceType === 'Datang' ?
                            <Avatar size="middle" src={<LogIn size={16} style={{ color:"#443627" }} />} style={{ background: '#EFDCAB'}} />
                            :
                            <Avatar size="middle" src={<LogOut size={16} style={{ color:"#443627", marginLeft: 4 }} />} style={{ background: '#EFDCAB'}} />
                        :
                        <Avatar shape='square' size="middle" src="/bg/prof.jpg" />
                        }
                    </div>
                    
                    <div className='text-sm'>
                        {presenceType === 'Datang' ?
                            <div className='font-bold text-sm'>{presenceData?.time || '00:00'} WIB</div> 
                            :
                            <div className='font-bold text-sm'>{presenceData?.presence?.time || '00:00'} WIB</div>
                        }
                    </div>
                </Flex>
                
                    
                <div className='mt-2'>
                    {presenceType === "Datang"
                        ?
                        (
                            <Button size='small' type='primary' onClick={() => handleClick(presenceType)} block disabled={presenceData?.presence_type === 'masuk'}>
                                <div className='text-sm'>
                                    Datang
                                </div>
                            </Button>  
                        ) : 
                        (
                            <Button size='small' type='primary' onClick={() => handleClick(presenceType)} block disabled={presenceData?.presence?.presence_type === 'pulang' || !presenceData ? true : false}>
                                <div className='text-sm'>
                                    Pulang
                                </div>
                            </Button>
                        )
                    
                    }
                </div>
            </div>
        </div>
    </div>
  );
}