import { __ } from '@wordpress/i18n';
import {
	Card,
	CardBody,
	CardHeader,
	Flex,
	Button,
	Icon,
	Notice,
} from '@wordpress/components';
import { warning } from '@wordpress/icons';

interface LoggingCardProps {
	startLogin: () => void;
	loginError?: string;
	isLoading?: boolean;
}

const LoggingCard: React.FC<LoggingCardProps> = ({
	startLogin,
	loginError,
	isLoading,
}) => {
	return (
		<Card size="small" style={{ border: '1px solid #d5c4a4' }}>
			<CardBody>
				<Flex align="flex-start" gap={3}>
					<Icon icon={warning} />
					<div style={{ flex: 1 }}>
						<div style={{ fontWeight: 600, marginBottom: 8 }}>
							{__(
								'Connect your Parcel2Go account',
								'parcel2go-shipping'
							)}
						</div>
						<p style={{ margin: '0 0 12px', color: '#50575e' }}>
							{__(
								'If you wish to import and save default settings, please sign up or link an existing Parcel2Go account.',
								'parcel2go-shipping'
							)}
						</p>
						<Button variant="primary" onClick={startLogin} disabled={isLoading} isBusy={isLoading}>
							{__('Link P2G Account', 'parcel2go-shipping')}
						</Button>
						{loginError && (
							<div style={{ marginTop: 12 }}>
								<Notice status="error" isDismissible={false}>
									{loginError}
								</Notice>
							</div>
						)}
					</div>
				</Flex>
			</CardBody>
		</Card>
	);
};

export default LoggingCard;