import { Avatar, Button, Flex } from 'antd';
import { LogIn, LogOut } from 'lucide-react';

export default function PresenceCardComponent({ presenceType, presenceUrl, presenceData, loading, onClick }) {
  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 font-bold'>
              {presenceType === 'Datang'
                ? `${presenceData?.time || '00:00'} WIB`
                : `${presenceData?.presence?.time || '00:00'} WIB`}
            </div>
          </Flex>

          <div className='mt-2'>
            <Button
              size='small'
              type='primary'
              block
              loading={loading}
              onClick={onClick}
              disabled={
                presenceType === 'Datang'
                  ? presenceData?.presence_type === 'masuk'
                  : presenceData?.presence?.presence_type === 'pulang' || !presenceData
              }
            >
              <div className='text-sm'>{presenceType}</div>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}